当前位置：首页 > CSS

css 制作三角形

2026-03-31 20:23:14CSS

使用 border 属性制作三角形

通过设置元素的 border 属性，可以创建纯 CSS 三角形。将元素的宽度和高度设为 0，然后为边框设置不同的颜色和宽度，通过透明边框隐藏不需要的部分。

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

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

通过调整边框的宽度和颜色，可以控制三角形的朝向。例如，将 border-bottom 改为 border-top 可以让三角形朝下。

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

创建直角三角形

通过仅设置两个边框（一个透明，一个有色），可以创建直角三角形。以下代码生成一个朝右的直角三角形。

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

使用 clip-path 制作三角形

clip-path 属性提供了更灵活的图形裁剪方式。使用 polygon() 函数可以精确控制三角形的形状。

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

使用 transform 旋转正方形

通过旋转一个正方形元素并隐藏部分内容，可以生成三角形。结合 overflow: hidden 和子元素的旋转实现。

.parent {
  width: 100px;
  height: 100px;
  overflow: hidden;
}

.child {
  width: 141.42px; /* 100 * √2 */
  height: 141.42px;
  background-color: #ffff00;
  transform: rotate(45deg);
  transform-origin: 0 0;
}

使用伪元素生成三角形

通过为元素添加伪元素（如 ::before 或 ::after），可以避免额外的 HTML 结构。结合 border 或 clip-path 方法实现。

css 制作三角形

.element::before {
  content: "";
  display: block;
  width: 0;
  height: 0;
  border-left: 30px solid transparent;
  border-right: 30px solid transparent;
  border-bottom: 60px solid #00ffff;
}