当前位置：首页 > CSS

css图形制作

2026-01-08 19:12:00CSS

CSS 图形制作方法

使用 CSS 可以创建各种基本和复杂的图形，主要通过 border、transform、clip-path 等属性实现。以下是几种常见图形的实现方式：

三角形

通过设置元素的 border 属性，将三个边的颜色设为透明，保留一个边的颜色：

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

圆形

使用 border-radius 将元素的边框半径设置为 50%：

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

梯形

结合 border 和 perspective 实现梯形效果：

.trapezoid {
  width: 100px;
  height: 0;
  border-bottom: 100px solid #2196f3;
  border-left: 30px solid transparent;
  border-right: 30px solid transparent;
}

五角星

使用 clip-path 定义多边形路径：

.star {
  width: 100px;
  height: 100px;
  background-color: #ffc107;
  clip-path: polygon(
    50% 0%, 
    61% 35%, 
    98% 35%, 
    68% 57%, 
    79% 91%, 
    50% 70%, 
    21% 91%, 
    32% 57%, 
    2% 35%, 
    39% 35%
  );
}

心形

通过 transform 和 ::before/::after 伪元素组合实现：

.heart {
  width: 100px;
  height: 90px;
  position: relative;
}

.heart::before,
.heart::after {
  content: "";
  position: absolute;
  top: 0;
  width: 50px;
  height: 80px;
  background: #e91e63;
  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%;
}

动画图形

结合 CSS 动画 (@keyframes) 让图形动起来：

.spinner {
  width: 50px;
  height: 50px;
  border: 5px solid rgba(0, 0, 0, 0.1);
  border-radius: 50%;
  border-top-color: #009688;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}