CSS3常見技巧（二）：如何用CSS3來實現三角形？

站長博客：https://www.pipipi.net/

如何使用CSS3來畫一個三角形常常使人很是感到困惑，其實原理上是寬度相等的邊距以45度來鏈接。

首先看第一個圖

這個是正常狀況下，若是咱們這個時候把頂部的邊距設爲none的話就會顯示下面這種狀況

再把content寬度設爲0

再把content高度設爲0

這個時候，很容易聯想到把左右邊距顏色設爲透明色（transparent）

大體過程就是如此，總結一下就是若是我想到一個三角形，好比它的方向就是向左的，那麼只要設置它相反放下的顏色不爲透明，並把其餘兩個方向設爲透明便可。
代碼以下：

.right{
            width:0;
            height:0;
            border-top:20px solid transparent;
            border-bottom: 20px solid transparent;
            border-left: 20px solid pink;
        }
        .top{
            width: 0;
            height: 0;
            border-left: 20px solid transparent;
            border-right:  20px solid transparent;
            border-bottom: 20px solid pink;
        }
        .left{
            width: 0;
            height:0;
            border-right:  20px solid pink;
            border-top: 20px solid transparent;
            border-bottom: 20px solid transparent
        }
        .bottom{
            width: 0;
            height: 0;
            border-top: 20px solid pink;
            border-left: 20px solid transparent;
            border-right: 20px solid transparent;
        }

實現效果如圖