css使用伪元素绘制带三角箭头的提示框

效果图

代码实现

使用伪元素进行绘制：

<div class="my-tip"></div>
.my-tip{
	width: 128px;
	height: 100px;
	background: #FFFFFF;
	box-shadow: 0px 1px 10px 0px rgba(0,0,0,0.05), 0px 4px 5px 0px rgba(0,0,0,0.08), 0px 2px 4px -1px rgba(0,0,0,0.12);
	border: 1px solid #DCDCDC;
	border-radius: 4px;
	&:after,&:before{ // 绘制三角形
	    content: "";
	    position: absolute;
	    width: 0;
	    height: 0;
	    border: 8px solid transparent;
	    border-bottom-color: #DCDCDC;
	    left: 57%;
	    top: -16px;
	}
	&:after{ // 遮住边框
	    border-bottom-color: #FFFFFF;
	    top: -15px;
	}
}