按照以下教程可以幫助你有效的理解css3繪制三角形的原理钝侠，以及有多個(gè)案例幫助你掌握這方面的知識(shí)

普通矩形添加邊框的效果

2017-05-15_145953.png

#demo{
        width: 100px;  
        height: 100px;  
        border:40px solid blue;  
    }

<div id="demo"></div>

去除內(nèi)部矩形的寬高只留下邊框時(shí)的效果

2017-05-15_150329.png

#demo{
        width: 0;  
        height: 0;  
        border:40px solid blue;  
    }

<div id="demo"></div>

分開設(shè)置邊框四條邊的顏色會(huì)出現(xiàn)以下效果

2017-05-15_152347.png

代碼如下

#demo{
        width: 0;  
        height: 0;  
        border-left:40px solid blue;  
        border-right: 40px solid red;
        border-top: 40px solid green;
        border-bottom: 40px solid yellow;
    }

為什么會(huì)出現(xiàn)四個(gè)三角形的情況呢，我們來看一看當(dāng)內(nèi)部矩形的寬高不是0的時(shí)候的效果

2017-05-15_152724.png

此時(shí)小泉，我們可以看到我們的矩形的外邊框都是以梯形的方式拼合在一起的，所以當(dāng)我們中間的矩形寬高都為0時(shí)谋旦，就會(huì)出現(xiàn)四個(gè)三角形的效果市殷，這樣纫事，我們想繪制各個(gè)朝向的三角形就會(huì)簡(jiǎn)單很多，因?yàn)閎order-color可以設(shè)置透明顏色览露，當(dāng)其他幾個(gè)三角形為透明荧琼，只有一個(gè)為有顏色，這個(gè)三角形就繪制成功了

向左的三角形

2017-05-15_153951.png

#demo{
        width:0;
            height:0;
        margin-right: 20px;   
        border:40px solid transparent;  
        border-right: 40px solid purple;  
      }

同理其他方向的三角形也可以用這種方法實(shí)現(xiàn)

當(dāng)我們想實(shí)現(xiàn)這個(gè)三角形上還有一個(gè)邊框時(shí)，如何實(shí)現(xiàn)呢命锄？因?yàn)檫@個(gè)三角形本身就是邊框畫出來的堰乔，此時(shí)還要在這個(gè)上面再加上一層邊框，我們只能使用疊加層的方法

2017-05-15_155444.png

.demo{
            width:0;
            height:0; 
            border:40px solid transparent;  
            border-bottom: 40px solid purple;  
            position: relative;
    }
.demo span{
            display:block;
            width:0;
            height:0; 
            border:38px solid transparent;  
            border-bottom: 38px solid green;  
            position: absolute;
            left: -38px;
            top: -37px;
      }

<div class="demo">
        <span></span>
</div>

此處實(shí)現(xiàn)兩個(gè)三角形進(jìn)行疊加脐恩，需要注意的是兩個(gè)三角形相對(duì)位置的布局镐侯，這里可以自己進(jìn)行嘗試，實(shí)現(xiàn)其他效果

實(shí)現(xiàn)一個(gè)氣泡效果的對(duì)話框

2017-05-15_160958.png

#demo{  
    width: 100px;  
    height: 100px;  
    border:2px solid #000;   
    position: relative;  
    }  
#demo:before,#demo:after{  
    content: ' ';  
     position: absolute;  
     left: 101px;  
     border: solid transparent;    
}  
#demo:after{  
    width: 0px;  
    height: 0px;  
    top:20px;  
    border-width: 10px;  
    border-left: 10px solid  #fff;    
}  
#demo:before{  
    width: 0px;  
    height: 0px;  
    top:18px;  
    border-width: 12px;  
    border-left: 12px solid #000;  
}  

<div id="demo"></div>

先畫一個(gè)矩形框驶冒，然后設(shè)置before和after兩個(gè)偽類的所有邊框都是透明的苟翻，此處重點(diǎn)在于設(shè)置這兩個(gè)偽類元素的位置，相對(duì)于矩形框的位置設(shè)置骗污，然后畫出白色小三角遮擋住黑色大三角線崇猫，小三角比大三角小2px正好出現(xiàn)一個(gè)完美的氣泡

繪制左上角標(biāo)記小三角

2017-05-15_162201.png

#demo{
        width:0;
        height:0;
        margin-right: 20px;   
        border-right:40px solid transparent; 
        border-left:40px solid purple;  
        border-top: 40px solid purple;  
        border-bottom: 40px solid transparent;
      }

<div id="demo"></div>

此處，大家可以通過調(diào)節(jié)border不同邊框的顏色和透明度組合來形成不同的圖形需忿，大家都可以嘗試一下