css怎么制作三角形

使用 border 属性制作三角形

通过设置元素的宽度和高度为0，利用边框（border）属性可以创建三角形。不同方向的边框组合可以形成不同方向的三角形。

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

使用 clip-path 制作三角形

clip-path 属性允许通过裁剪区域创建复杂的形状，包括三角形。使用 polygon 函数定义三角形的顶点坐标。

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

使用 transform 旋转矩形

通过旋转一个矩形元素可以生成三角形。结合 overflow: hidden 和伪元素实现。

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

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

使用 CSS 渐变制作三角形

linear-gradient 可以创建倾斜的颜色分界线，通过合理设置渐变角度和颜色断点模拟三角形。

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

使用 SVG 内联方式

虽然这不是纯 CSS 方案，但 SVG 与 CSS 配合使用可以创建精确的三角形图形。

<div class="triangle-container">
  <svg viewBox="0 0 100 100">
    <polygon points="50 0, 100 100, 0 100" fill="#ff0000"/>
  </svg>
</div>

.triangle-container {
  width: 100px;
  height: 100px;
}

每种方法各有优缺点：border 方法兼容性好但难以创建复杂三角形；clip-path 更灵活但旧浏览器支持有限；transform 方法需要额外容器；渐变方法适合简单场景；SVG 方案最精确但需要额外标记。