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

效果图

代码实现

使���伪元素进行绘制：

.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;}}