在制作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;}
转载于:https://www.cnblogs.com/bhlsheji/p/5398212.html
