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

标签：style   blog   http   color   os   io   ar   2014   问题   

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

效果图：

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

标签：style   blog   http   color   os   io   ar   2014   问题   

原文地址：http://www.cnblogs.com/baoguanxia/p/3932750.html