带箭头矩形指示框、气泡框

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

 

效果图：

转载于:https://www.cnblogs.com/baoguanxia/p/3932750.html