CSS 繪制三角形的六種方法

1. 設置不同顏色的 border

<div class="block"></div>

.block {
    display: inline-block;
    height: 0;
    width: 0;
    border-top: 50px solid yellowgreen;
    border-bottom: 50px solid transparent;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
}

2. linear-gradient() 線性漸變

1. linear-gradient() 函數用於創建一個表示兩種或多種顏色線性漸變的圖片。
2. 通過旋轉 rotate 或者 scale，就能得到各種角度

.block {
    display: inline-block;
    height: 100px;
    width: 100px;
    /* 從左下到右上，從藍色開始漸變、到50%位置是透明色漸變開始、最后以透明色結束 */
    background: linear-gradient(45deg, blue, blue 50%, transparent 50%, transparent 100%);
    /* 或者： background: linear-gradient(to right top, blue, blue 50%, transparent 50%, transparent 100%); */
}

3. conic-gradient() 錐形漸變

.block {
    display: inline-block;
    height: 100px;
    width: 100px;
    /* 繪制圓心在（0, 0），繪制起點在90度，從藍色開始繪制到45度的位置，從45.1度開始繪制透明色 */
    background: conic-gradient(from 90deg at 0 0, blue 0, blue 45deg, transparent 45.1deg);
}

4. 旋轉 transform: rotate

.block {
    display: inline-block;
    height: 100px;
    width: 141px;
    position: relative;
    overflow: hidden;
}

.block::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background: blue; 
    /* 旋轉原點在(0, 0），旋轉90度 */
    transform-origin: 0 0;
    transform: rotate(45deg);
}

5. clip-path 使用裁剪創建元素的可顯示區域

.block {
    display: inline-block;
    height: 100px;
    width: 100px;
    background: blue;
    /* polygon 定義多邊形， ()里面的每對參數表示多邊形的頂點坐標（X,Y），也就是連接點 */
    clip-path: polygon(0 0, 100% 0, 0 100%, 0 0);
}

6. 使用特殊字符繪制三角形

◄ : ◄ 
► : ► 
▼ : ▼ 
▲ : ▲
⊿ : ⊿
△ : △

<div class="block">&#9650</div>

.block {
    font-size: 100px;
    color: blue;
}

注意：該方法呈現的三角形效果與當前瀏覽器所安裝的字體相關，所以，慎用。

參考: https://github.com/chokcoco/iCSS