如何制作CSS倒三角

在CSS中，我們可以使用border屬性來(lái)制作一個(gè)倒三角，以下是一個(gè)簡(jiǎn)單的示例：

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

在這個(gè)示例中，我們創(chuàng)建了一個(gè)類名為triangle的元素，這個(gè)元素沒(méi)有寬度和高度，但是我們有三個(gè)border屬性，前兩個(gè)border屬性分別設(shè)置了左右兩邊的邊框?yàn)?0px的透明邊框，而后一個(gè)border屬性則設(shè)置了底部邊框?yàn)?00px的紅色邊框，由于左右兩邊的邊框是透明的，所以我們只能看到底部的紅色邊框，從而形成一個(gè)倒三角的形狀。

你可以根據(jù)需要調(diào)整邊框的大小和顏色，以制作出不同樣式的倒三角，這種方法簡(jiǎn)單實(shí)用，可以幫助你在CSS中輕松制作出倒三角形狀。