html代码：
<div class="tag">
<em></em>
<span class="white-triangle"></span>
<p>
<span>!</span>
投放时间与排期不符！
</p>
</div>
less代码：
/********带箭头矩形框*******/
.tag {
border: 1px solid #ddd;
padding: 20px 15px;
background-color: #fff;
font-size: 14px;
color: #666;
position: relative;
em { /****实心三角形****/
width: 0;
height: 0;
line-height: 0; /***为解决ie6兼容性问题*/
font-size: 0; /***为解决ie6兼容性问题*/
border-width: 10px;
border-style: dashed dashed solid; /***为解决ie6兼容性问题*/
border-color: transparent transparent #ddd;
position: absolute;
left: 20px;
top: -20px;
}
.white-triangle { /***叠加在实心三角形上的白色三角形**/
width: 0;
height: 0;
line-height: 0;
font-size: 0;
border-width: 8px;
border-style: dashed dashed solid;
border-color: transparent transparent #fff;
position: absolute;
left: 22px;
top: -16px;
}
p {
span { /***红色圆形**/
width: 18px;
height: 18px;
border-radius: 18px;
text-align: center;
line-height: 18px;
background-color: #ff9595;
display: inline-block;
color: #fff;
margin-right: 5px;
}
}
}
效果图：
