css實現帶箭頭選項卡純css實現帶三角箭頭帶描邊帶陰影帶圓角的兼容各瀏覽器de氣泡層

時間 2019-12-14

標籤 css 實現箭頭選項三角邊帶陰影圓角兼容瀏覽器氣泡欄目 CSS 简体版

原文原文鏈接

這陣子在作一個web端項目中遇到一個問題，須要實現帶箭頭的選項卡點擊可切換。起初沒想太多，直接切一個向上的小箭頭圖片，外層div設置相同顏色的邊框，再用相對定位和絕對定位。這種方法是可行的，可是由於手機和電腦的屏幕顯示圖片的畫質細節不一樣，致使1px的邊框比1px的切圖實際粗不少，對於有強迫症的人來講內心老是不舒服的……後來我就想，屁大點的箭頭直接用css寫一個算了。但是之前沒寫過，那就研究一下吧。網上有不少這方面的資料，可是仍是那句話，那都是人家的不是本身的，要想據爲己有本身也寫篇博客吧。css

這種純css沒有兼容性的問題，無需切圖，甚至沒有用到CSS3，對各類瀏覽器支持良好。html

基本原理：控制盒子模型的寬度高度和邊框的顯示隱藏，以及改變某一條邊的顏色。web

從梯形入手：瀏覽器

當元素寬、高和邊框的寬相等時，改變某一邊的顏色能夠看到一個梯形；ide

<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>

梯形

三角形：post

當元素寬、高爲零，且其餘邊爲透明顏色時，能夠形一個三角形。學習

向上的三角形：<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>

上下左右三角形

經過不一樣顏色的兩個元素覆蓋能夠造成三角線。url

<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>

上下左右三角線

那麼帶箭頭的提示框就簡單了，只須要外層加個邊框，用相對和絕對定位就能夠實現。spa

<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>