css图形制作
CSS 图形制作基础
CSS 可以通过 border、transform、clip-path 等属性创建基本图形，无需依赖图片或 SVG。
矩形与正方形
通过 width 和 height 控制尺寸，background-color 填充颜色：
.rectangle {
width: 200px;
height: 100px;
background-color: #3498db;
}
.square {
width: 100px;
height: 100px;
background-color: #e74c3c;
}圆形
将 border-radius 设为 50%，配合宽高相等：
.circle {
width: 100px;
height: 100px;
border-radius: 50%;
background-color: #2ecc71;
}三角形与多边形
三角形
利用 border 的透明属性实现：
.triangle {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid #f39c12;
}多边形
使用 clip-path 定义顶点坐标：
.hexagon {
width: 100px;
height: 100px;
background-color: #9b59b6;
clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}复杂图形与效果
阴影与渐变
通过 box-shadow 和 linear-gradient 增强视觉效果：
.gradient-circle {
width: 120px;
height: 120px;
border-radius: 50%;
background: linear-gradient(135deg, #1abc9c, #3498db);
box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}动画图形
结合 @keyframes 实现动态效果：
.pulsing-square {
width: 80px;
height: 80px;
background-color: #e74c3c;
animation: pulse 2s infinite;
}
@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.2); }
100% { transform: scale(1); }
}响应式图形设计
使用 vw/vh 或百分比单位适应不同屏幕：
.responsive-circle {
width: 20vw;
height: 20vw;
border-radius: 50%;
background-color: #3498db;
}通过组合基础属性和现代 CSS 特性，可以创建从简单到复杂的图形，同时保持轻量化和高性能。
