css如何制作三角形

使用 border 属性制作三角形

通过设置元素的 border 属性可以创建三角形。将元素的宽度和高度设为 0，然后通过设置不同方向的边框宽度和颜色来实现。

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

调整边框方向控制三角形朝向

通过调整 border-top、border-bottom、border-left 或 border-right 的宽度和颜色，可以控制三角形的方向。

.triangle-up {
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid #ff0000;
}

.triangle-down {
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-top: 100px solid #ff0000;
}

.triangle-left {
  border-top: 50px solid transparent;
  border-bottom: 50px solid transparent;
  border-right: 100px solid #ff0000;
}

.triangle-right {
  border-top: 50px solid transparent;
  border-bottom: 50px solid transparent;
  border-left: 100px solid #ff0000;
}

使用 clip-path 制作三角形

clip-path 属性可以通过多边形裁剪创建三角形，更灵活地控制形状。

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

使用 transform 旋转矩形

通过旋转一个矩形元素并隐藏溢出部分，也可以实现三角形效果。

.triangle-transform {
  width: 100px;
  height: 100px;
  background-color: #ff0000;
  transform: rotate(45deg);
  overflow: hidden;
  position: relative;
}

.triangle-transform::before {
  content: '';
  position: absolute;
  width: 141%;
  height: 141%;
  background-color: white;
  transform: rotate(45deg);
  top: -20%;
  left: -20%;
}

使用 SVG 绘制三角形

SVG 提供更精确的图形控制，适合复杂场景。

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