当前位置：首页 > CSS

css如何制作三角形

2026-01-08 18:16:34CSS

使用 border 属性制作三角形

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

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

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

通过调整 border-top、border-bottom、border-left 或 border-right 的宽度和颜色，可以控制三角形的方向。例如，制作一个朝右的三角形：

css如何制作三角形

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

制作直角三角形

通过设置两个相邻边框的颜色为非透明色，其余边框为透明，可以制作直角三角形。

.right-angle-triangle {
  width: 0;
  height: 0;
  border-top: 100px solid #f00;
  border-right: 100px solid transparent;
}

使用 clip-path 制作三角形

clip-path 是一种更灵活的现代 CSS 方法，可以通过多边形路径裁剪元素形状。以下代码生成一个朝上的三角形：

css如何制作三角形

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

使用 transform 旋转矩形

通过旋转一个矩形元素并隐藏溢出部分，可以间接实现三角形效果。这种方法适用于需要动态调整角度的场景。

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

结合伪元素增强灵活性

使用 ::before 或 ::after 伪元素生成三角形，避免污染 HTML 结构。例如，在按钮上添加一个三角形指示符：

.button::after {
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 10px solid #fff;
}