css3 實現選項卡小三角形狀

效果如下圖查看鏈接

html

<div class="fitting-tab">
    <div class="fitting-text  fit-active" id="btn1">
        <div class="trangle "></div>
            推薦              
    </div>
    <div class="fitting-text " id="btn2">
        <div class="trangle "></div>
            男裝              
    </div>
    <div class="fitting-text " id="btn3">
        <div class="trangle "></div>
            女裝              
    </div>
    <div class="fitting-text " id="btn4">
        <div class="trangle "></div>
            套裝              
    </div>
</div>

css 樣式 （核心部分）

.fitting-tab .fitting-text{
    width:80px;
    height:30px;
    background:red;
    position: relative;
    text-align:center;
    line-height:30px;
    background-color:#AF8172;
    color:#fcfcfc;
    font-size:16px;
    border-radius:6px;


}

.fitting-tab .trangle{
    position: absolute;
    width: 0;
    height: 0;
    border-right: 5px solid transparent;
    border-left: 5px solid transparent;
    border-top: 5px solid #AF8172;
    z-index: 99;
    bottom: -5px;
    left: 50%;
    margin-left: -5px;
    }