如何制作CSS小三角

在CSS中，我們可以使用border屬性來(lái)制作一個(gè)小三角，這個(gè)小三角其實(shí)就是一個(gè)等邊三角形，通過(guò)調(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;
}

上面的代碼會(huì)生成一個(gè)向上的紅色小三角，等邊三角形的原理是，當(dāng)兩個(gè)對(duì)邊的寬度相等時(shí)，第三個(gè)邊（底邊）會(huì)自動(dòng)調(diào)整以保持等邊關(guān)系，我們可以將左右兩邊的border寬度設(shè)置為相等，然后將底邊的border寬度設(shè)置為需要的大小，這樣就可以得到一個(gè)向上或向下的小三角了。

如果想要改變小三角的顏色，只需要調(diào)整border-bottom的顏色即可，如果想要改變小三角的大小，只需要調(diào)整border的寬度即可，這種方法可以制作出不同大小和顏色的三角，非常實(shí)用。