当前位置：首页 > CSS

css 制作三角形

2026-01-14 12:10:54CSS

使用边框制作三角形

通过设置元素的边框属性，利用边框交汇处的斜切特性生成三角形。将元素的宽高设为0，通过调整不同方向边框的宽度和颜色实现。

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

使用旋转正方形制作三角形

通过旋转一个正方形元素并隐藏溢出部分来创建三角形。需要配合transform和overflow属性使用。

css 制作三角形

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

使用clip-path裁剪路径

现代CSS的clip-path属性可以直接定义多边形裁剪区域，精确控制三角形形状。

css 制作三角形

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

使用线性渐变背景

通过CSS渐变创建视觉上的三角形效果，适合需要平滑过渡的场景。

.triangle {
  width: 100px;
  height: 100px;
  background: linear-gradient(to bottom right, red 50%, transparent 50%);
}

使用伪元素生成三角形

结合伪元素和边框技术，可以在不增加额外HTML元素的情况下创建三角形。

.element::after {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid blue;
}