css制作画图
CSS 画图基础方法
CSS 可以通过 border、box-shadow、transform 等属性绘制简单图形。以下是一些常见图形的实现方式：
圆形
.circle {
width: 100px;
height: 100px;
border-radius: 50%;
background: #ff6b6b;
}三角形 通过透明边框实现：
.triangle {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid #4ecdc4;
}使用伪元素增强效果
伪元素 ::before 和 ::after 可扩展绘图能力：
爱心图案
.heart {
position: relative;
width: 100px;
height: 90px;
}
.heart::before, .heart::after {
content: "";
position: absolute;
top: 0;
width: 50px;
height: 80px;
background: #ff4757;
border-radius: 50px 50px 0 0;
}
.heart::before {
left: 50px;
transform: rotate(-45deg);
transform-origin: 0 100%;
}
.heart::after {
left: 0;
transform: rotate(45deg);
transform-origin: 100% 100%;
}复杂图形技巧
使用 box-shadow 多重投影
.star {
width: 0;
height: 0;
color: #ffa502;
position: relative;
}
.star::before {
content: "★";
font-size: 60px;
position: absolute;
text-shadow:
80px 0 currentColor,
-80px 0 currentColor,
40px 40px currentColor,
-40px 40px currentColor;
}clip-path 自定义路径
.hexagon {
width: 100px;
height: 100px;
background: #2ed573;
clip-path: polygon(
50% 0%, 100% 25%,
100% 75%, 50% 100%,
0% 75%, 0% 25%
);
}动画效果整合
结合 CSS 动画让图形动态化：
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.spinner {
width: 50px;
height: 50px;
border: 5px solid rgba(0,0,0,0.1);
border-radius: 50%;
border-top-color: #5352ed;
animation: spin 1s linear infinite;
}响应式设计考虑
使用 vw/vh 单位确保图形自适应：
.responsive-circle {
width: 20vw;
height: 20vw;
border-radius: 50%;
background: #ff6348;
}浏览器兼容性提示
- 现代浏览器支持所有上述特性
- 旧版 IE 需使用 SVG 作为备用方案
clip-path属性在不同浏览器中可能需要前缀
通过组合这些技术，可以创建从简单几何形状到复杂插图的各类图形。对于更高级的绘图需求，建议结合 SVG 或 Canvas 实现。
