当前位置：首页 > CSS

css制作三角形

2026-03-31 18:56:02CSS

使用边框制作三角形

通过设置元素的宽度和高度为0，利用边框的透明属性可以创建三角形。将三个边框设为透明，一个边框显示颜色，形成三角形。

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

调整三角形方向

通过改变边框的颜色和透明方向，可以控制三角形的指向。例如，指向右侧的三角形：

css制作三角形

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

使用伪元素生成三角形

利用伪元素（如 ::before 或 ::after）生成三角形，避免额外添加HTML元素。

css制作三角形

.element::after {
  content: "";
  display: block;
  width: 0;
  height: 0;
  border-left: 30px solid transparent;
  border-right: 30px solid transparent;
  border-top: 60px solid #0000ff;
}

使用clip-path制作三角形

clip-path 属性可以通过多边形裁剪生成更灵活的三角形，支持任意角度和形状。

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

使用transform旋转矩形

通过旋转一个矩形元素并隐藏溢出部分，可以生成三角形。需配合 overflow: hidden 使用。

.triangle-transform {
  width: 100px;
  height: 100px;
  position: relative;
  overflow: hidden;
}
.triangle-transform::after {
  content: "";
  position: absolute;
  width: 141.42px; /* 100 * √2 */
  height: 141.42px;
  background: #ff00ff;
  transform: rotate(45deg);
  top: -50px;
  left: -50px;
}