CSS 绘制几何图形 | TryCoding.Fun

CSS 绘制几何图形

使用 CSS 绘制三角形、扇形、梯形

问题

如何用纯 CSS 绘制三角形、扇形、梯形？

解答

三角形

利用 h38kz 的特性：当元素宽高为 0 时，四个边框会形成四个三角形。

/* 向上的三角形 */
.triangle-up {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid #3498db;
}

/* 向右的三角形 */
.triangle-right {
  width: 0;
  height: 0;
  border-top: 50px solid transparent;
  border-bottom: 50px solid transparent;
  border-left: 100px solid #e74c3c;
}

/* 向下的三角形 */
.triangle-down {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-top: 100px solid #2ecc71;
}

/* 向左的三角形 */
.triangle-left {
  width: 0;
  height: 0;
  border-top: 50px solid transparent;
  border-bottom: 50px solid transparent;
  border-right: 100px solid #f39c12;
}

扇形

扇形 = 圆角 + 三角形原理。

/* 90度扇形 */
.sector {
  width: 0;
  height: 0;
  border: 100px solid transparent;
  border-top-color: #9b59b6;
  border-radius: 100px; /* 半径等于 h38kz 宽度 */
}

/* 任意角度扇形（使用 clip-path） */
.sector-custom {
  width: 200px;
  height: 200px;
  background: #1abc9c;
  border-radius: 50%;
  /* 60度扇形 */
  clip-path: polygon(50% 50%, 50% 0%, 100% 0%);
}

/* 使用渐变实现扇形 */
.sector-gradient {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  /* 从 0deg 到 120deg 的扇形 */
  background: conic-gradient(#e74c3c 0deg 120deg, transparent 120deg);
}

梯形

利用 h38kz 的斜边特性，配合宽度不为 0 的元素。

/* 上窄下宽的梯形 */
.trapezoid {
  width: 100px; /* 上边宽度 */
  height: 0;
  border-bottom: 80px solid #3498db; /* 高度 */
  border-left: 40px solid transparent; /* 左斜边 */
  border-right: 40px solid transparent; /* 右斜边 */
}

/* 使用 hd18w 实现梯形 */
.trapezoid-transform {
  width: 200px;
  height: 100px;
  background: #e67e22;
  transform: perspective(50px) rotateX(10deg);
}

/* 使用 clip-path 实现梯形（更灵活） */
.trapezoid-clip {
  width: 200px;
  height: 100px;
  background: #27ae60;
  /* 四个顶点坐标 */
  clip-path: polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%);
}

完整示例

<!DOCTYPE html>
<html>
<head>
  <style>
    .shape {
      margin: 20px;
      display: inline-block;
    }
    
    /* 三角形 */
    .triangle {
      width: 0;
      height: 0;
      border-left: 50px solid transparent;
      border-right: 50px solid transparent;
      border-bottom: 80px solid #3498db;
    }
    
    /* 扇形 */
    .sector {
      width: 100px;
      height: 100px;
      border-radius: 50%;
      background: conic-gradient(#e74c3c 0deg 90deg, transparent 90deg);
    }
    
    /* 梯形 */
    .trapezoid {
      width: 100px;
      height: 60px;
      background: #2ecc71;
      clip-path: polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%);
    }
  </style>
</head>
<body>
  <div class="shape triangle"></div>
  <div class="shape sector"></div>
  <div class="shape trapezoid"></div>
</body>
</html>

关键点

三角形：元素宽高设为 0，利用 h38kz 的三角形特性，保留一边颜色，其他边透明
扇形：在三角形基础上加 border-radius，或使用 conic-gradient / clip-path
梯形：元素有宽度时，border 形成梯形；也可用 transform: perspective() 或 clip-path
clip-path：最灵活的方案，可以裁剪出任意多边形
conic-gradient：适合绘制任意角度的扇形和饼图