html代码:
<div class="tag">
<em></em>
<span class="white-triangle"></span>
<p>
<span>!</span>
投放时间与排期不符!
</p>
</div>
less代码:
/********带箭头矩形框*******/
.common-style(@left:20px, @top:-20px, @border-width:10px, @border-color:#ddd) {
width: 0;
height: 0;
line-height: 0; /***为解决ie6兼容性问题*/
font-size: 0; /***为解决ie6兼容性问题*/
border-style: dashed dashed solid; /***为解决ie6兼容性问题*/
border-color: transparent transparent @border-color;
border-width: @border-width;
position: absolute;
left: @left;
top: @top;
}
.tag {
border: 1px solid #ddd;
padding: 20px 15px;
background-color: #fff;
font-size: 14px;
color: #666;
position: relative;
em {
.common-style;
}
.white-triangle {
.common-style(22px, -16px, 8px, #fff);
}
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;
}
}
}
效果图: