当前位置：首页 > CSS

css制作特殊图形

2026-03-12 04:51:23CSS

使用 CSS 制作三角形

通过设置边框的透明属性实现三角形效果。将一个元素的宽度和高度设为 0，通过调整边框宽度和颜色，隐藏部分边框。

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

制作圆形或椭圆形

使用 border-radius 属性将元素的边角设置为圆角。当值为 50% 时，元素会变成圆形；调整宽度和高度可以形成椭圆形。

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

.oval {
  width: 150px;
  height: 100px;
  border-radius: 50%;
  background-color: #0000ff;
}

制作梯形或平行四边形

通过 transform 的 skew 方法倾斜元素，形成梯形或平行四边形。

.parallelogram {
  width: 150px;
  height: 100px;
  transform: skew(-20deg);
  background-color: #ff9900;
}

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

制作星形

利用 clip-path 属性定义多边形路径，形成星形或其他复杂形状。

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

制作对话气泡

结合 border-radius 和伪元素生成对话气泡效果。

.bubble {
  width: 200px;
  height: 100px;
  background-color: #ffffff;
  border-radius: 20px;
  position: relative;
}

.bubble::after {
  content: "";
  position: absolute;
  bottom: -20px;
  left: 20px;
  border-width: 20px 10px 0;
  border-style: solid;
  border-color: #ffffff transparent transparent;
}

使用 CSS 渐变制作复杂图形

通过 linear-gradient 或 radial-gradient 创建渐变背景，形成特殊图形。

.gradient-circle {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: radial-gradient(circle, #ff0000, #000000);
}

利用伪元素叠加形状

通过 ::before 和 ::after 伪元素叠加多个形状，形成更复杂的图形。

css制作特殊图形

.heart {
  width: 100px;
  height: 100px;
  position: relative;
  transform: rotate(-45deg);
}

.heart::before,
.heart::after {
  content: "";
  width: 60px;
  height: 100px;
  background-color: #ff0000;
  border-radius: 50px 50px 0 0;
  position: absolute;
}

.heart::before {
  left: 60px;
  top: 0;
}

.heart::after {
  left: 0;
  top: -60px;
}