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;
}