Effective前端1---chapter 2 用CSS畫一個三角形

1.CSS畫三角形的畫法

第一步：三角形能夠用border畫出來，首先一個有四個border的div長這樣：

<div class="triangle"></div>
<style>
        .triangle{
            margin: 100px;
            border-top: 40px solid #000;
            border-bottom: 40px solid #333;
            border-left: 40px solid #666;
            border-right: 40px solid #999;
            width: 100px;
            height: 100px;
            background-color: #ccc;
       }
</style>

第二步：而後把它的寬和高都去掉，width：0；height：0；變成以下圖：

第三步：把border-top去掉，這樣就把上面的區域給裁掉了，以下圖：

border-top:none;

第四步：把左右border變爲透明狀態，此時咱們就獲得了三角形。以下：

border-left: 40px solid transparent;

border-right: 40px solid transparent;

另外根據不一樣border的透明，能夠實現斜邊不一樣位置的三角形；以下

 

2.控制三角形的角度

經過控制三角形的角度，能夠實現直角三角形和等邊三角形。

首先，咱們能夠保持border-left和border-right大小不變，讓border-bottom不斷變大，觀察下形狀變化：

能夠看到頂部的角度在不斷變小，其實就是三角形的底邊長度不變，而高在不斷變化，由於border-bottom-width就是三角形的高。

另外，咱們能夠讓border-left不斷變大，保持其餘兩個border不變，觀察效果：

經過比較能夠看出，border-left的變大增長了左邊那條邊的長度，由此能夠想到，若是右邊的border-width是0的話，那麼將造成一個直角三角形。

border-right：0的狀態下，能夠使一個直角三角形。

3.畫一個對話框能夠經常使用到的三角形

首先，畫一個深色的三角形：

<div class="chat-msg"></div>    
    .chat-msg{
            width: 300px;
            height: 80px;
            border: 1px solid #ccc;
            position: relative;
            margin: 100px;
        }
        .chat-msg::before{
            content: '';
            position: absolute;
            top: 34px;
            left: -10px;
            border-top: 6px solid transparent;
            border-bottom:  6px solid transparent;
            border-right: 10px solid #ccc;
        }    

而後畫一個白色的三角形蓋上去，錯誤兩個像素，就能夠實現。利用chat-msg的僞類元素after實現

      .chat-msg::after{
            content: '';
            position: absolute;
            top: 34px;
            left: -8px;
            border-top: 6px solid transparent;
            border-bottom:  6px solid transparent;
            border-right: 10px solid #fff;
        }

　

另外，使用filter添加陰影效果

.chat-msg{
     filter: drop-shadow(0 0 2px #999);
     background-color: #fff;
}

以上實現帶陰影三角形對話框的步驟。