css制作三角形

使用 border 属性创建三角形

通过设置元素的 border 属性可以实现三角形效果。原理是利用边框的交界处形成的斜边。

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

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

通过调整不同方向的边框宽度和颜色，可以控制三角形的朝向。

/* 向上三角形 */
.triangle-up {
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid blue;
}

/* 向下三角形 */
.triangle-down {
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-top: 100px solid green;
}

/* 向左三角形 */
.triangle-left {
  border-top: 50px solid transparent;
  border-bottom: 50px solid transparent;
  border-right: 100px solid yellow;
}

/* 向右三角形 */
.triangle-right {
  border-top: 50px solid transparent;
  border-bottom: 50px solid transparent;
  border-left: 100px solid purple;
}

使用 clip-path 创建三角形

clip-path 属性提供了更灵活的图形裁剪方式，可以直接绘制三角形。

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

使用 transform 旋转矩形

通过旋转正方形元素并隐藏部分内容，可以创建三角形效果。

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

.triangle-transform::after {
  content: "";
  position: absolute;
  width: 71px;  /* 100 / √2 ≈ 70.71 */
  height: 71px;
  background-color: white;
  transform: rotate(45deg);
  top: 15px;
  left: 15px;
}

使用 SVG 绘制三角形

SVG 是专门用于矢量图形的技术，绘制三角形非常直观。

<svg width="100" height="100" viewBox="0 0 100 100">
  <polygon points="50,0 0,100 100,100" fill="brown"/>
</svg>

注意事项

• 边框法创建的三角形大小由边框宽度决定，调整各边边框宽度可以改变三角形形状
• clip-path 方法在现代浏览器中支持良好，但需要考虑兼容性
• SVG 方法适合需要复杂图形或动画的场景
• 旋转矩形方法会产生锯齿，可能需要抗锯齿处理