css实现带箭头选项卡

这阵子在做一个web端项目中遇到一个问题，需要实现带箭头的选项卡点击可切换。起初没想太多，直接切一个向上的小箭头图片，外层div设置相同颜色的边框，再用相对定位和绝对定位。这种方法是可行的，但是因为手机和电脑的屏幕显示图片的画质细节不同，导致1px的边框比1px的切图实际粗很多，对于有强迫症的人来说心里总是不舒服的……后来我就想，屁大点的箭头直接用css写一个算了。可是以前没写过，那就研究一下吧。网上有很多这方面的资料，但是还是那句话，那都是人家的不是自己的，要想据为己有自己也写篇博客吧。

这种纯css没有兼容性的问题，无需切图，甚至没有用到CSS3，对各种浏览器支持良好。

基本原理：控制盒子模型的宽度高度和边框的显示隐藏，以及改变某一条边的颜色。

从梯形入手：

当元素宽、高和边框的宽相等时，改变某一边的颜色可以看到一个梯形；

<div class="box">
<span class="bot"></span>
<span class="top"></span>
css实现气泡对话框
</div>
<style type="text/css">
.box {
width: 300px;
padding: 30px 20px;
border: 5px solid #666;
position: relative;
margin:30px auto;
}
.box span {
width: 0;
height: 0;
font-size: 0;
overflow: hidden;
position: absolute;
}
.box span.bot {
border-width: 20px;
border-style: dashed dashed solid ;
border-color: transparent transparent #666 ;
left: 100px;
bottom: 85px;
}
.box span.top {
border-width: 20px;
border-style: dashed dashed solid ;
border-color: transparent transparent #ffffff;
left: 100px;
bottom: 78px;
}
</style>

气泡对话框
要实现我需求再结合js就行啦。



在这里，我把学习过程中参考的文章标注一下供大家学习：

用纯CSS实现的箭头

纯css实现带三角箭头带描边带阴影带圆角的兼容各浏览器de气泡层