效果如下图查看链接
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; }