CSS 提供了三種出色的方法可以實(shí)現(xiàn)基本的形狀。本文就來看看如何使用這些方法來實(shí)現(xiàn)一個(gè)三角形。三種方法如下：

• border。
• linear-gradient。
• clip-path。

1、border

使用 CSS 繪制三角形的第一種方法就是使用 「border」 屬性。

給定一個(gè)寬度和高度都為 0 的元素，其 border 的任何值都會(huì)直接相交，我們可以利用這個(gè)交點(diǎn)來創(chuàng)建三角形。也就是說，border屬性是三角形組成的，下面給每一邊都提供不同的邊框顏色：

.triangle {
    width: 0;
    height: 0;
    border: 100px solid;
    border-color: orangered skyblue gold yellowgreen;
}

將元素的長寬都設(shè)置為0，效果是這樣的：

可以看到，我們已經(jīng)基本上實(shí)現(xiàn)了4個(gè)三角形形狀。所以可以根據(jù)border這個(gè)特性來繪制三角形。

如果想要一個(gè)指向下面的三角形，可以讓 border 的上邊可見，其他邊都設(shè)置為透明：

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

如果想要一個(gè)指向右面的三角形，可以讓 border 的左邊可見，其他邊都設(shè)置為透明：

.triangle {
    width: 0;
    height: 0;
    border-left: 50px solid skyblue;
    border-top: 50px solid transparent;
    border-bottom: 50px solid transparent;
}

上面的代碼也可以這樣寫：

.triangle {
 border-style: solid;
  border-color: transparent;
  border-width: 50px 0 50px 50px;
  border-left-color: skyblue;
}

我們還可以通過調(diào)整不同方向邊框的值來實(shí)現(xiàn)不同方向和大小的三角形：

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

當(dāng)然，實(shí)現(xiàn)一個(gè)等邊三角形也是可以的：

.triangle {
  width: 0;
  height: 0;
  border-left: 69px solid transparent;  
  border-right: 69px solid transparent;  
  border-bottom: 120px solid skyblue; 
}

2、linear-gradient

linear-gradient 需要結(jié)合 background-image 來實(shí)現(xiàn)三角形，下面就來逐步使用漸變實(shí)現(xiàn)一個(gè)三角形。

首先，我們先來畫一個(gè)長方形：

.triangle {
  width: 80px;
  height: 100px;
  background-repeat: no-repeat;
  outline: 1px solid skyblue;
}

效果如下：

接下來，添加一個(gè)漸變，這會(huì)使元素的一半呈現(xiàn)紅色：

background-image: linear-gradient(45deg, orangered 50%, rgba(255, 255, 255, 0) 50%);

效果如下：

我們的目標(biāo)是創(chuàng)建一個(gè)與使用 border 方法時(shí)外觀相同的三角形。因此，需要調(diào)整 background-size 和 background-position 值：

background-size: 100% 50%;

效果如下：

由于漸變設(shè)置了 45 度角，形狀看起來有些奇怪。需要調(diào)整角度，使三角形的頂邊是從左上角開始，直到右側(cè)的中間?？梢允褂脼g覽器開發(fā)者工具進(jìn)行調(diào)試，直到預(yù)期的效果。將 linear-gradient 值更新為：

background-image: linear-gradient(32deg, orangered 50%, rgba(255, 255, 255, 0) 50%);

效果如下：

這其實(shí)已經(jīng)是一個(gè)三角形了，但還不是我們想要的效果。對于線性漸變，我們需要添加多個(gè)背景來實(shí)現(xiàn)三角形。下面來添加一個(gè)它的鏡像效果：

background-image: linear-gradient(32deg, orangered 50%, rgba(255, 255, 255, 0) 50%), linear-gradient(148deg, orangered 50%, rgba(255, 255, 255, 0) 50%);

效果如下：

看似距離三角形還很遠(yuǎn)，但是只需最后一步，只需調(diào)整兩個(gè)三角形的位置即可，這里使用 background-position 屬性來調(diào)整：

background-position: top left, bottom left;

效果如下：

這樣就實(shí)現(xiàn)了三角形的效果(去掉outline即可)，最終的代碼如下：

.triangle {
   width: 160px;
   height: 200px;
   outline: 2px solid skyblue;
   background-repeat: no-repeat;
   background-image: linear-gradient(32deg, orangered 50%, rgba(255, 255, 255, 0) 50%), linear-gradient(148deg, orangered 50%, rgba(255, 255, 255, 0) 50%);
   background-size: 100% 50%;
   background-position: top left, bottom left;
}

CSS 線性漸變可用于創(chuàng)建很多種形狀。不過它是有缺點(diǎn)的，就是需要調(diào)試出合適的漸變角度。

3、clip-path

最后一種方法——clip-path，它是精簡的并且有擴(kuò)展性的。不過目前其在瀏覽器兼容性不是很好，使用時(shí)要考慮瀏覽器是否支持。

下面先畫一個(gè)帶背景顏色的長方形：

.triangle {
  width: 80px;
  height: 100px;
  background-color: skyblue;
}

效果如下：

clip-path 就是使用它來繪制多邊形(或圓形、橢圓形等)并將其定位在元素內(nèi)。實(shí)際上，瀏覽器不會(huì)繪制 clip-path 之外的任何區(qū)域，因此我們看到的是 clip-path 的邊界。

下面來繪制一個(gè)指向右側(cè)的三角形：

clip-path: polygon(0 0, 0% 100%, 100% 50%);

這個(gè)值是怎么來的呢?使用 clip-path 可以為沿路徑放置的每個(gè)點(diǎn)定義坐標(biāo)。在這種情況下，就定義了三個(gè)點(diǎn)：top-left (0 0)、bottom-left (0% 100%)、right-center (100% 50%)。效果如下：

完整代碼如下：

.triangle{
  margin: 100px;
  width: 160px;
   height: 200px;
   background-color: skyblue;
  clip-path: polygon(0 0, 0% 100%, 100% 50%);
}

可以使用在線工具來嘗試這個(gè)屬性，繪制不同的圖形：https://bennettfeely.com/clippy/。

本文到這里就結(jié)束了，你還知道哪些使用純 CSS 實(shí)現(xiàn)三角形的方法?