CSS 实现三角形

CSS 可以用来创建各种形状，包括三角形。以下是一些示例代码，展示了如何使用 CSS 创建不同类型的三角形。

向上的等腰三角形

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

.triangle-up {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid blue;
}

向下的等腰三角形

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

.triangle-down {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-top: 100px solid red;
}

向左的等腰三角形

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

.triangle-left {
  width: 0;
  height: 0;
  border-top: 50px solid transparent;
  border-bottom: 50px solid transparent;
  border-right: 100px solid green;
}

向右的等腰三角形

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

.triangle-right {
  width: 0;
  height: 0;
  border-top: 50px solid transparent;
  border-bottom: 50px solid transparent;
  border-left: 100px solid yellow;
}

实心三角形

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

.solid-triangle {
  width: 0;
  height: 0;
  border-top: 0 solid transparent;
  border-bottom: 100px solid transparent;
  border-left: 100px solid black;
}

在这些示例中，我们使用了 border 属性来创建三角形。这些三角形是由边框构成的，所以它们实际上是透明的，只有边框是可见的。

你可以根据需要调整边框的大小和颜色来创建不同形状和大小的三角形。