当前位置：首页 > CSS

css图形制作

2026-02-12 15:29:11CSS

CSS 图形制作基础

使用 CSS 可以创建各种基本图形，如圆形、三角形、矩形等。通过 border、width、height 和 border-radius 等属性实现。

圆形
通过 border-radius: 50% 将正方形变为圆形：

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

三角形
利用 border 的透明属性实现：

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

复杂图形与动画

通过组合基本图形和 CSS 动画，可以创建更复杂的动态效果。

css图形制作

心形
使用 ::before 和 ::after 伪元素组合：

.heart {
  width: 100px;
  height: 90px;
  position: relative;
}
.heart::before, .heart::after {
  content: "";
  width: 50px;
  height: 80px;
  background: red;
  border-radius: 50px 50px 0 0;
  position: absolute;
}
.heart::before {
  left: 50px;
  transform: rotate(-45deg);
}
.heart::after {
  left: 0;
  transform: rotate(45deg);
}

旋转动画
为图形添加 @keyframes 动画：

css图形制作

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.spin {
  animation: spin 2s linear infinite;
}

响应式与 SVG 结合

对于更复杂的图形，可以结合 SVG 或 CSS 变量实现响应式设计。

SVG 与 CSS 混合
通过 CSS 控制 SVG 图形的样式：

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" class="svg-circle" />
</svg>

.svg-circle {
  fill: green;
  stroke: black;
  stroke-width: 3;
}

CSS 变量控制图形
使用变量动态调整图形属性：

:root {
  --shape-size: 120px;
}
.resizable-circle {
  width: var(--shape-size);
  height: var(--shape-size);
  border-radius: 50%;
  background: purple;
}