css实现带箭头选项卡

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

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

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

从梯形入手：

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

<span class="ladder"></span>
<style type="text/css">
.ladder{
    border:10px solid transparent;
    border-left:10px #f00 solid;
    width:10px;
    height:10px;
    display: inline-block;
}
</style>

梯形

三角形：

当元素宽、高为零，且其他边为透明颜色时，可以形一个三角形。

向上的三角形：<span class="triangle-up"></span>
向下的三角形：<span class="triangle-down"></span>
向左的三角形：<span class="triangle-left"></span>
向右的三角形：<span class="triangle-right"></span>

<style type="text/css">
.triangle-up{
    border: 20px solid transparent;
    border-bottom: 20px solid #f00;
    width:0;
    height:0;
}
.triangle-down{
    border: 20px solid transparent;
    border-top: 20px solid #f00;
    width:0;
    height:0;
}
.triangle-left{
    border:20px solid transparent;
    border-right:20px solid #f00;
    width:0;
    height:0;
}
.triangle-right{
    border:20px solid transparent;
    border-left:20px solid #f00;
    width:0;
    height:0;
}
</style>

上下左右三角形

通过不同颜色的两个元素覆盖可以形成三角线。

aaarticlea/png;base64,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" alt="" />

<span class="triangle02">
        向上的三角线：
        <span class="pot01"></span>
        <span class="pot02"></span>
    </span>
    <span class="triangle02">
        向下的三角线：
        <span class="pot03"></span>
        <span class="pot04"></span>
    </span>
    <span class="triangle02">
        向左的三角线：
        <span class="pot05"></span>
        <span class="pot06"></span>
    </span>
    <span class="triangle02">
        向右的三角线：
        <span class="pot07"></span>
        <span class="pot08"></span>
    </span>

<style type="text/css">
.triangle02{
    width:200px;
    height:100px;
    display: inline-block;
    position: relative;
}
.triangle02 span {
    width: 0;
    height: 0;
    font-size: 0;
    overflow: hidden;
    position: absolute;
}
.pot01{
    border-width: 20px;
    border-style: dashed dashed solid ;
    border-color: transparent transparent #f00 ;
    left: 100px;
    top: 0;
}
.pot02{
    border-width: 20px;
    border-style: dashed dashed solid ;
    border-color: transparent transparent #fff ;
    left: 100px;
    top: 2px;
}
.pot03{
    border-width: 20px;
    border-style: solid dashed dashed;
    border-color: #f00 transparent transparent;
    left: 100px;
    top: 2px;
}
.pot04{
    border-width: 20px;
    border-style: solid dashed dashed;
    border-color: #fff transparent transparent;
    left: 100px;
    top: 0;
}
.pot05{
    border-width: 20px;
    border-style: dashed solid dashed dashed;
    border-color: transparent #f00 transparent transparent;
    left: 100px;
    top: 2px;
}
.pot06{
    border-width: 20px;
    border-style: dashed solid dashed dashed;
    border-color: transparent #fff transparent transparent;
    left: 102px;
    top: 2px;
}
.pot07{
    border-width: 20px;
    border-style: dashed dashed dashed solid;
    border-color: transparent transparent transparent #f00;
    left: 100px;
    top: 2px;
}
.pot08{
    border-width: 20px;
    border-style: dashed dashed dashed solid;
    border-color: transparent transparent transparent #fff;
    left: 98px;
    top: 2px;
}
</style>

上下左右三角线

那么带箭头的提示框就简单了，只需要外层加个边框，用相对和绝对定位就可以实现。

<div class="box">
    <span class="top01"></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.top01 {
    border-width: 20px;
    border-style: dashed dashed solid ;
    border-color: transparent transparent #666;
    left: 20px;
    bottom: 81px;
}
</style>

箭头对话框

<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气泡层