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：适合绘制任意角度的扇形和饼图
目录