【基礎】在css中繪製三角形及相關應用

簡言

本文簡要闡述了用CSS邊框的方法在頁面上繪製三角形，包括幾種典型的三角形繪製，還介紹了幾個簡單的應用場景。利用邊框繪製三角形方法只是衆多方案中的一種，你們根據項目實際，選用最適宜項目的方案。

1 基本原理

在CSS中，咱們能夠利用border-top、border-left、border-bottom、border-left四個屬性來繪製三角形。實現的基本原理參見下面的演示代碼及其運行結果。

核心代碼：

.box {
    width: 50px;
    height: 50px;
    border-top: 50px solid red;
    border-left:50px solid blue;
    border-right: 50px solid green;
    border-bottom: 50px solid yellow;
}

運行結果：

演示代碼

從以上代碼及運行結果不難想出繪製三角形的辦法，咱們只要將 .box 的長度和寬度都設成0，就能夠獲得四個等腰三角形。再將不想保留的三角形邊框顏色設置成透明色（即：border-color : transparent）就能夠隱藏掉不想保留的三角形。從而完成三角形的繪製。

2 繪製三角形

2.1 等邊三角形

等邊三角形（又稱正三邊形），爲三邊相等的三角形，其三個內角相等，均爲60°，它是銳角三角形的一種。等邊三角形也是最穩定的結構。

2.1.1 尖角向上：

.triangle-up {
    width: 0;
    height: 0;
    border-bottom: 100px solid red;
    border-left: 57.735px solid transparent;
    border-right: 57.735px solid transparent;
}

演示代碼

2.1.2 尖角向下：

.triangle-down {
    width: 0;
    height: 0;
    border-top: 100px solid red;
    border-left: 57.735px solid transparent;
    border-right: 57.735px solid transparent;
}

演示代碼

2.1.3 尖角向左：

.triangle-left {
    width: 0;
    height: 0;
    border-right: 100px solid red;
    border-top: 57.735px solid transparent;
    border-bottom: 57.735px solid transparent;
}

演示代碼

2.1.4 尖角向右：

.triangle-right {
    width: 0;
    height: 0;
    border-left: 100px solid red;
    border-top: 57.735px solid transparent;
    border-bottom: 57.735px solid transparent;
}

演示代碼

2.2 等腰直角三角形

等腰直角三角形是特殊的等腰三角形，它的兩底角相等，都是45°；它的兩腰長度相等。

2.2.1 左上直角：

.triangle-top-left{
    width: 0;
    height: 0;
    border-top: 100px solid red;
    border-right: 100px solid transparent;
}

演示代碼

2.2.2 右上直角：

.triangle-top-right {
    width: 0;
    height: 0;
    border-top: 100px solid red;
    border-left: 100px solid transparent;
}

演示代碼

2.2.3 左下直角：

.triangle-bottom-left{
    width: 0;
    height: 0;
    border-bottom: 100px solid red;
    border-right: 100px solid transparent;
}

演示代碼

2.2.4 右下直角：

.triangle-bottom-right {
    width: 0;
    height: 0;
    border-bottom: 100px solid red;
    border-left: 100px solid transparent;
}

演示代碼

3 相關應用

3.1 彈出框(popover)組件

彈出框(popover)或提示框(tooltip)通常都會用到三角形，三角形明確並增強了指向做用。相似於Bootstrap的Popover和Tooltip組件都用到了邊框三角形的實現方式。

演示代碼

上述演示只是實現了頂部彈出框，其它方向彈出框參考上述實現方式便可。

3.2 視頻播放按鈕

視頻播放按鈕(Play button)能夠採用邊框三角形的實現方式。

演示代碼

三角形的應用場景還有不少，好比下拉菜單(dropdown menu)中，或者是「頂」及「踩」按鈕等。

邊框實現三角形只是衆多方案之一，你們能夠根據項目實際，選擇小圖標方案或選用SVG方案。