当前位置：首页 > CSS

css图制作

2026-02-12 20:25:12CSS

CSS 图形制作方法

CSS 可用于创建各种基本图形和复杂形状，无需依赖图片或 SVG。以下是常见图形的实现方法：

圆形

使用 border-radius 属性将元素变为圆形：

.circle {
  width: 100px;
  height: 100px;
  background-color: #3498db;
  border-radius: 50%;
}

三角形

利用边框和透明色创建三角形：

.triangle {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid #e74c3c;
}

矩形

标准矩形是最简单的 CSS 形状：

css图制作

.rectangle {
  width: 150px;
  height: 100px;
  background-color: #2ecc71;
}

梯形

通过结合 perspective 和 transform 创建梯形：

.trapezoid {
  width: 150px;
  height: 0;
  border-bottom: 100px solid #9b59b6;
  border-left: 25px solid transparent;
  border-right: 25px solid transparent;
}

五边形

使用伪元素和变换组合：

.pentagon {
  width: 100px;
  height: 100px;
  background-color: #f1c40f;
  position: relative;
}

.pentagon:before {
  content: "";
  position: absolute;
  top: -50px;
  left: 0;
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 50px solid #f1c40f;
}

星形

使用多个伪元素和变换：

css图制作

.star {
  width: 0;
  height: 0;
  color: #e67e22;
  position: relative;
  display: block;
  border-right: 100px solid transparent;
  border-bottom: 70px solid #e67e22;
  border-left: 100px solid transparent;
  transform: rotate(35deg);
}

.star:before {
  content: "";
  width: 0;
  height: 0;
  position: absolute;
  top: -45px;
  left: -65px;
  border-right: 30px solid transparent;
  border-bottom: 80px solid #e67e22;
  border-left: 30px solid transparent;
  transform: rotate(-35deg);
}

.star:after {
  content: "";
  width: 0;
  height: 0;
  position: absolute;
  top: 3px;
  left: -105px;
  border-right: 100px solid transparent;
  border-bottom: 70px solid #e67e22;
  border-left: 100px solid transparent;
  transform: rotate(-70deg);
}

动画图形

为图形添加动画效果：

.animated-circle {
  width: 100px;
  height: 100px;
  background-color: #3498db;
  border-radius: 50%;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.2); }
  100% { transform: scale(1); }
}

高级技巧

使用 clip-path 创建复杂形状

.custom-shape {
  width: 200px;
  height: 200px;
  background-color: #1abc9c;
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

响应式图形

使用百分比或视口单位使图形适应不同屏幕尺寸：

.responsive-circle {
  width: 20vw;
  height: 20vw;
  background-color: #e74c3c;
  border-radius: 50%;
}

阴影和渐变效果

为图形添加视觉效果：

.fancy-rectangle {
  width: 150px;
  height: 100px;
  background: linear-gradient(to right, #3498db, #9b59b6);
  box-shadow: 5px 5px 15px rgba(0,0,0,0.3);
  border-radius: 10px;
}

这些方法展示了 CSS 创建图形的基本技术，通过组合这些技术可以构建更复杂的视觉效果。现代 CSS 特性如 clip-path 和 mask 提供了更多可能性，使纯 CSS 图形设计更加灵活强大。

标签: css