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>

通過不同顏色的兩個元素覆蓋可以形成三角線。

<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氣泡層