首页 > 代码库 > 使用position:relative制作下边框下的小三角
使用position:relative制作下边框下的小三角
在制作tab选项卡的时候，有时会有下边框，且下边框下还有一个头向下的小三角，这完全可以用css来实现，而不必使用背景图片。因为使用背景图片时会有一个问题，选项卡内容字数不同，导致使用背景图片时无法控制它始终在中间显示。
<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;}
使用position:relative制作下边框下的小三角
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。