html 小三角折叠菜单,css3 实现选项卡小三角形状

css3 实现选项卡小三角形状

css3 实现选项卡小三角形状

效果如下图查看链接

html

推荐

男装

女装

套装

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;

}

css3 实现选项卡小三角形状相关教程