css 制作图形
使用 CSS 制作图形
CSS 可以通过 border、transform、clip-path 等属性创建多种图形，以下是常见图形的实现方法：
圆形
通过 border-radius 设置为 50% 将元素变为圆形：
.circle {
width: 100px;
height: 100px;
background-color: #3498db;
border-radius: 50%;
}三角形
利用 border 的透明属性实现三角形：
.triangle {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid #e74c3c;
}梯形
通过 perspective 和 rotateX 模拟梯形效果：
.trapezoid {
width: 100px;
height: 0;
border-bottom: 80px solid #2ecc71;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
}五角星
使用 clip-path 的 polygon 函数定义星形顶点：
.star {
width: 100px;
height: 100px;
background-color: #f1c40f;
clip-path: polygon(
50% 0%, 61% 35%, 98% 35%, 68% 57%,
79% 91%, 50% 70%, 21% 91%, 32% 57%,
2% 35%, 39% 35%
);
}心形
结合 transform 和 ::before/::after 伪元素：
.heart {
width: 50px;
height: 50px;
position: relative;
transform: rotate(-45deg);
background-color: #e84393;
}
.heart::before, .heart::after {
content: '';
width: 50px;
height: 50px;
border-radius: 50%;
background-color: #e84393;
position: absolute;
}
.heart::before { top: -25px; left: 0; }
.heart::after { top: 0; left: 25px; }复杂图形进阶
对于更复杂的图形，建议使用 SVG 或 clip-path 的路径语法：
.custom-shape {
clip-path: path('M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80');
}注意事项
- 考虑浏览器兼容性，
clip-path在旧版浏览器需要前缀 - 图形尺寸应使用相对单位（如
vw/vh）增强响应式适配 - 动画效果可通过
@keyframes实现图形变形过渡
通过组合这些技术，无需图片即可实现绝大多数基础图形和部分复杂图形的绘制。
