当前位置：首页 > CSS

css 制作三角形

2026-02-12 12:34:45CSS

使用 CSS 制作三角形的方法

通过边框（border）属性实现

利用 CSS 的 border 属性可以轻松创建三角形。通过设置不同方向的边框颜色和宽度，并将元素的宽度和高度设为 0，可以形成三角形效果。

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

上述代码会生成一个红色的等腰三角形，底边宽度为 100px，高度为 100px。

调整边框方向以改变三角形朝向

通过调整边框的显示方向，可以改变三角形的朝向。例如，以下代码生成一个向上的三角形：

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

生成向下的三角形：

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

生成向左的三角形：

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

生成向右的三角形：

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

创建直角三角形

通过设置部分边框为透明，可以生成直角三角形。例如：

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

使用 clip-path 属性

CSS 的 clip-path 属性提供了更灵活的图形裁剪功能，可以用于创建三角形。

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

使用 transform 和伪元素

通过旋转伪元素，可以生成三角形。例如：

.transform-triangle {
  position: relative;
  width: 100px;
  height: 100px;
  overflow: hidden;
}
.transform-triangle::after {
  content: "";
  position: absolute;
  width: 141%;
  height: 141%;
  background-color: #f00;
  transform: rotate(45deg);
  top: -20%;
  left: -20%;
}