帶箭頭矩形指示框、氣泡框

標籤：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;
　　　　}
　　}
}

 

：

帶箭頭矩形指示框、氣泡框