当前位置：首页 > CSS

css怎么制作三角形

2026-01-08 18:15:46CSS

使用边框制作三角形

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

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

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

使用旋转制作三角形

通过transform属性旋转正方形元素，配合overflow:hidden可以创建三角形。

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

使用clip-path制作三角形

clip-path属性可以直接裁剪出三角形形状，支持多种几何图形。

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

使用伪元素制作三角形

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

css怎么制作三角形

.triangle-pseudo {
  position: relative;
  width: 100px;
  height: 100px;
}
.triangle-pseudo::after {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid orange;
}