三角形

要建立 CSS 三角形，請定義寬度和高度為 0 畫素的元素。將使用邊框屬性形成三角形形狀。對於具有 0 高度和寬度的元素，4 個邊框（頂部，右側，底部，左側）各自形成三角形。這是一個 0 高度/寬度和 4 個不同顏色邊框的元素。

通過將某些邊框設定為透明，將其他邊框設定為顏色，我們可以建立各種三角形。例如，在向上三角形中，我們將底部邊框設定為所需的顏色，然後將左右邊框設定為透明。這是一個左右邊框略微著色的影象，以顯示三角形是如何形成的。

三角形的尺寸可以通過改變不同的邊框寬度來改變 - 更高，更短，不平衡等。下面的例子都顯示了一個 50x50 畫素的三角形。

三角形 - 指向上方

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

.triangle-up {
  width: 0;
  height: 0;
  border-left: 25px solid transparent;
  border-right: 25px solid transparent;
  border-bottom: 50px solid rgb(246, 156, 85);
}

三角形 - 指向下方

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

.triangle-down {
  width: 0;
  height: 0;
  border-left: 25px solid transparent;
  border-right: 25px solid transparent;
  border-top: 50px solid rgb(246, 156, 85);
}

三角形 - 指向右邊

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

.triangle-right {
  width: 0;
  height: 0;
  border-top: 25px solid transparent;
  border-bottom: 25px solid transparent;
  border-left: 50px solid rgb(246, 156, 85);
}

三角形 - 指向左側

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

.triangle-left {
  width: 0;
  height: 0;
  border-top: 25px solid transparent;
  border-bottom: 25px solid transparent;
  border-right: 50px solid rgb(246, 156, 85);
}

三角形 - 向上/向右指向

<div class="triangle-up-right"></div>

.triangle-up-right {
  width: 0;
  height: 0;
  border-top: 50px solid rgb(246, 156, 85);
  border-left: 50px solid transparent;
}

三角形 - 向上/向左指向

<div class="triangle-up-left"></div>

.triangle-up-left {
  width: 0;
  height: 0;
  border-top: 50px solid rgb(246, 156, 85);
  border-right: 50px solid transparent;
}

三角形 - 向下/向右指向

<div class="triangle-down-right"></div>

.triangle-down-right {
  width: 0;
  height: 0;
  border-bottom: 50px solid rgb(246, 156, 85);
  border-left: 50px solid transparent;
}

三角形 - 指向下/左

<div class="triangle-down-left"></div>

.triangle-down-left {
  width: 0;
  height: 0;
  border-bottom: 50px solid rgb(246, 156, 85);
  border-right: 50px solid transparent;
}