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 特性，可以创建从简单到复杂的图形，同时保持轻量化和高性能。