CSS怎么倒三角？試試這些方法！

在CSS中，我們可以使用線性漸變（linear-gradient）來(lái)創(chuàng)建一個(gè)倒三角形，這種方法需要用到CSS3中的新特性，因此請(qǐng)確保你的瀏覽器支持CSS3。

我們創(chuàng)建一個(gè)div元素，并給它一個(gè)類名，triangle-container”，我們將使用CSS來(lái)樣式化這個(gè)元素。

<div class="triangle-container"></div>

我們定義CSS樣式，這里的關(guān)鍵是使用線性漸變來(lái)填充背景，并通過(guò)設(shè)置高度和寬度來(lái)形成倒三角形。

.triangle-container {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-top: 100px solid #000;
  position: relative;
}

在這個(gè)樣式中，我們?cè)O(shè)置了元素的寬度和高度為0，然后通過(guò)設(shè)置邊框來(lái)形成倒三角形，邊框的樣式設(shè)置為solid，表示邊框是實(shí)線，顏色為#000（黑色），我們通過(guò)設(shè)置position屬性為relative，使得元素可以相對(duì)于其正常位置進(jìn)行定位。