css制作三角形

使用 border 属性制作三角形

通过设置元素的 border 属性，可以利用边框的交界处形成三角形。将一个元素的宽度和高度设为 0，然后为其中一条边框设置颜色，其他边框设置为透明。

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

调整三角形方向

通过调整不同边框的宽度和颜色，可以改变三角形的方向。例如，制作一个向右的三角形：

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

使用 clip-path 制作三角形

clip-path 属性可以通过裁剪元素来生成三角形，支持更复杂的形状控制。

.triangle-clip {
  width: 100px;
  height: 100px;
  background-color: green;
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

使用 transform 旋转矩形

通过旋转一个矩形元素并隐藏溢出部分，可以生成三角形。这种方法适合需要动态调整角度的场景。

.triangle-transform {
  width: 100px;
  height: 100px;
  background-color: purple;
  transform: rotate(45deg);
  overflow: hidden;
  position: relative;
}
.triangle-transform::before {
  content: '';
  position: absolute;
  width: 141.42%; /* 100% * √2 */
  height: 141.42%;
  background-color: inherit;
  transform: rotate(-45deg) translate(-50%, -50%);
  top: 50%;
  left: 50%;
}

使用 SVG 绘制三角形

SVG 提供更灵活的图形绘制能力，适合需要复杂交互或动画的场景。

<svg width="100" height="100" viewBox="0 0 100 100">
  <polygon points="50,0 0,100 100,100" fill="orange" />
</svg>

以上方法各有优缺点，border 方式简单但扩展性有限，clip-path 和 transform 适合复杂需求，SVG 则更适合矢量图形场景。