如何制作CSS小三角

在CSS中，我們可以使用border屬性來制作一個(gè)小三角，這個(gè)小三角其實(shí)是一個(gè)等邊三角形，通過調(diào)整border的寬度和顏色，我們可以制作出不同大小和顏色的三角，下面是一個(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è)類將寬度和高度設(shè)置為0，然后我們將border-left和border-right設(shè)置為50px的透明邊框，border-bottom設(shè)置為100px的紅色邊框，這樣，我們就制作出了一個(gè)紅色的等邊三角形。

我們可以調(diào)整border的寬度和顏色來制作出不同大小和顏色的三角，如果我們想要一個(gè)更大的三角，我們可以增加border的寬度；如果我們想要一個(gè)藍(lán)色的三角，我們可以將border-bottom的顏色設(shè)置為藍(lán)色。

這種方法制作CSS小三角非常簡(jiǎn)單，而且效果也很好，我們可以將其應(yīng)用在各種設(shè)計(jì)中，例如導(dǎo)航菜單、彈窗箭頭等。