用CSS製作小三角提示符號

標籤：style   blog   http   color   io   os   ar   2014   div   

今天在項目中遇到了如的切圖要求。

 

 

 

對，重點就是那個小三角提示符號。

html 結構如下

1 <div class="wrap">2          <div class="up-arr1"></div>3          <div class="up-arr2"></div>4 </div>

css 結構如下：

.wrap {    position: relative;}.up-arr1 {    position: absolute;    width: 0;     height: 0;     border-left: 8px solid transparent;     border-right: 8px solid transparent;     border-bottom: 18px solid #CCC;     top: -18px;     left: 85px;}.up-arr2  {    position: absolute;    width: 0;     height: 0;    border-left: 8px solid transparent;     border-right: 8px solid transparent;     border-bottom: 18px solid #F9F9F9;     top: -17px;    left: 85px;}

　　這個實現不難，網上也有很多例子。但是，我還是把其中的思想再敘述一遍，加深自己的理解

1    父元素設定為相對定位，子項目用絕對位置。將第一個三角形顏色設為和邊框顏色相同，第二個三角形顏色與裡面背景相同。

　　第一個三角形比第二個top值多npx。(這裡的n 即為邊框的寬度)。

2  保持border-left 和border-right 的寬度相同。因為他們代表了三角形的左右兩條邊。通過調整這兩個邊框的寬度可以設定尖角的程度。

用CSS製作小三角提示符號