CSS3三角怎么寫？

CSS3提供了強大的樣式和布局功能，其中三角的寫法是其中的一個小技巧，下面是一些關(guān)于CSS3三角的寫法：

1、三角形：使用border屬性，設(shè)置三角形的三個邊，可以指定顏色、粗細等樣式。

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

2、箭頭：使用偽元素和transform屬性，可以創(chuàng)建指向不同方向的箭頭。

div {
  position: relative;
}
div::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 20px solid red;
}

3、三角形和箭頭的組合：結(jié)合上述兩個方法，可以創(chuàng)建更復雜的三角形和箭頭的組合。

div {
  position: relative;
}
div::before {
  content: "";
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-top: 40px solid red;
}
div::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 20px solid red;
}

這些寫法可以實現(xiàn)CSS3三角的不同效果，可以根據(jù)具體需求進行調(diào)整和組合。