css 制作图形
使用CSS制作基本图形
通过CSS的border、width、height等属性可以创建简单的几何图形。例如，正方形通过设置width和height为相同值实现，圆形通过border-radius: 50%实现。
.square {
width: 100px;
height: 100px;
background: #3498db;
}
.circle {
width: 100px;
height: 100px;
background: #e74c3c;
border-radius: 50%;
}利用伪元素和边框制作复杂图形
通过组合::before和::after伪元素以及透明边框，可以生成三角形、梯形等形状。例如，三角形通过设置零宽高的元素和透明边框实现。
.triangle {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid #2ecc71;
}使用CSS Clip-path裁剪路径
clip-path属性允许通过多边形、圆形或SVG路径裁剪元素，创建复杂的不规则图形。支持polygon()、circle()等函数。
.star {
width: 100px;
height: 100px;
background: #f39c12;
clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}渐变与混合模式生成图形
CSS线性渐变或径向渐变可以模拟条纹、波浪等效果。结合background-blend-mode能实现更丰富的视觉层次。
.gradient-circle {
width: 150px;
height: 150px;
border-radius: 50%;
background: linear-gradient(45deg, #9b59b6, #3498db);
}动画与变换增强效果
通过transform和@keyframes动画，可以为图形添加旋转、缩放等动态效果。
.spinning-square {
width: 80px;
height: 80px;
background: #e67e22;
animation: spin 2s linear infinite;
}
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}响应式图形的实现
使用vw、vh或百分比单位确保图形适应不同屏幕尺寸。结合媒体查询调整形状参数。
.responsive-circle {
width: 20vw;
height: 20vw;
border-radius: 50%;
background: #1abc9c;
}
