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