三角形

要创建 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;
}