使用position:relative製作下邊框下的小三角

標籤：

在製作tab選項卡的時候，有時會有下邊框，且下邊框下另一個頭向下的小三角，這全然能夠用css來實現，而不必使用背景圖片。

由於使用背景圖片時會有一個問題，選項卡內容字數不同。導致使用背景圖片時無法控制它始終在中間顯示。

<ul class="technical_list">
            <li class="active-tab">入門指南<div class="triangle"></div></li>
            <li>Android<div class="triangle"></div></li>
            <li>iOS<div class="triangle"></div></li>
            <li>WebIM<div class="triangle"></div></li>
            <li>REST API<div class="triangle"></div></li>
</ul>

樣式：

.technical_list li{
  display: block;
  position: relative;
  float: left;
  margin-left: 30px;
  color: #aaa;
  font-size: 18px;
  line-height: 25px;
  cursor:pointer;
}

.message_l .technical_list .technicalCur,
.message_l .technical_list .active-tab {
  border-bottom: solid 2px #00addc;
  color: #00addc;
}
.message_l .technical_list .technicalCur .triangle,
.message_l .technical_list .active-tab .triangle {
  display: block;
}

.triangle{ border-bottom:none;

border-left:solid 3px #fff; 

border-right:solid 3px #fff; 

border-top:solid 4px #00addc; 

width:0; 

position:relative; 

top:6px; 

margin:0 auto; 

display: none;}

使用position:relative製作下邊框下的小三角