你是否想要在你的网页设计中添加一些有趣的图形元素，但又不想使用复杂的图片素材？别担心，CSS 可以轻松地帮你实现！

这篇文章将带你一步步学习用 CSS 代码绘制 16 种常见图形，从简单的矩形、圆形到复杂的星形、月亮，甚至还有逼真的飞溅效果，让你掌握用 CSS 代码绘制图形的技巧，为你的网页增添更多创意和个性。

矩形

HTML 中的元素默认都是矩形，因此绘制矩形非常简单，只需要指定宽度和高度即可。如果遇到问题，可以尝试使用内联元素、块级元素或内联块级元素，一般都能解决。

.rectangle {
  width: 500px;
  height: 300px;
  background: black;
}

正方形

正方形是宽高相等的矩形。我们可以直接修改矩形的代码，将高度设置为与宽度相同的值：

.square {
  width: 300px;
  height: 300px;
  background: black;
}

这样也能实现正方形。但是，如果我们要改变正方形的大小，就需要同时修改宽度和高度两个值。虽然不算很麻烦，但 CSS 提供了 aspect-ratio 属性，可以更方便地控制宽高比例。将 aspect-ratio 设置为 1（或 1/1）就可以得到一个正方形。而且现在只需要修改一行代码就可以改变大小了：

.square {
  width: 300px;
  aspect-ratio: 1;
  background: black;
}

圆形

从正方形出发，我们可以通过设置圆角来绘制圆形。使用 border-radius 属性，并将值设置为一个较大的百分比（50% 或更高）即可。非常简单！

.circle {
  width: 300px;
  aspect-ratio: 1;
  background: black;
  border-radius: 50%;
}

椭圆形

椭圆形和圆形类似，都是圆角形状，但不同于圆形的是，椭圆形基于矩形而不是正方形。（当然，椭圆形还有更精确的数学定义，但这里为了简单起见，我们只用这种比较通俗的描述）。因此，我们只需要在矩形的基础上添加 border-radius 属性即可。

.ellipse {
  width: 300px;
  height: 400px;
  background: black;
  border-radius: 50%;
}

椭圆/卵形

椭圆和卵形并不完全一样。虽然有关于内部圆形是否交叉的技术定义，但为了简单起见，我们认为卵形类似于鸡蛋形状。我们可以通过 border-radius 属性的两个值来实现这种形状。是的，border-radius 属性有两个值集，每个值集最多可以包含四个值：水平半径和垂直半径，用斜杠 (/) 分隔。

我们将水平半径设置为 100%，然后为顶部角设置更大的垂直半径值，为底部角设置更小的垂直半径值。例如：

.oval {
  width: 300px;
  height: 400px;
  background: black;
  border-radius: 100% / 120% 120% 75% 75%;
}

具体的值会根据矩形的大小而有所不同。如果值过大，顶部可能会变平，如果值过小，底部可能会变平。你需要根据自己的需求调整这些数值。

钟形

钟形是一种夸张的卵形，其中一侧长而圆，另一侧扁平（但仍然有柔和的曲线）。要得到这种形状，只需要将卵形的较大值设置得更大，较小的值设置得更小即可。

在使用 CSS 绘制艺术作品时，这种形状可以用来绘制身体甚至面部（只需稍微调整一下半径值）。

.bell {
  width: 300px;
  height: 400px;
  background: black;
  border-radius: 100% / 160% 160% 25% 25%;
}

拱形

拱形与椭圆形和钟形略有不同，它底部扁平，顶部弯曲。绘制拱形不需要调整数值，只需要将 border-radius 属性设置为固定值即可：

.arch {
  width: 300px;
  height: 400px;
  background: black;
  border-radius: 50% / 100% 100% 0% 0%;
}

如果元素的宽度是高度的两倍，那么我们就会得到一个半圆而不是拱形。

眼睛

这是三个需要稍微旋转的形状中的第一个。我们从一个正方形开始，然后设置两个相对角的圆角，而另外两个角保持为零。我通常从左上角开始，并添加 45 度旋转，但你也可以选择其他任何角并相应地调整旋转角度。

.tear {
  width: 300px;
  aspect-ratio: 1;
  background: black;
  rotate: 45deg;
  border-radius: 80% 0;
}

你可以使用 rotate: 45deg 属性或 transform: rotate(45deg) 属性。两者都可以正常工作。至于 border-radius，数值越高，眼睛的弧度越柔和（重复数值可以让一侧比另一侧更高：80% 0 100% 0）。

泪滴

有趣的是，泪滴形状是眼睛形状的变体。代码相同，只是更改了 border-radius：将三个半径值设为最大值以得到圆形，并将最后一个角的半径设为零以得到一个尖端。

.tear {
  width: 300px;
  aspect-ratio: 1;
  background: black;
  rotate: 45deg;
  border-radius: 0 50% 50% 50%;
}

心形

绘制心形与之前的形状略有不同，它将使用元素和 ::before 和 ::after 伪元素。我们从一个正方形开始，将其旋转 45 度，然后添加伪元素作为圆形（如上所述）。我们将一个伪元素水平平移，另一个伪元素垂直平移（由于元素旋转，两者看起来都会斜向平移），这样就完成了。代码看起来可能比较复杂，但原理很简单。

.heart {
  width: 300px;
  aspect-ratio: 1;
  background: black;
  rotate: 45deg;
  position: relative;
}

.heart::before,
.heart::after {
  content: "";
  position: absolute;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: inherit;
  translate: -50% 0;
}

.heart::after {
  translate: 0 -50%;
}

三角形

许多在线文章讨论了如何使用边框、零高度/宽度和一些透明颜色来绘制三角形。我强烈反对这种方法。虽然这种方法可以工作，但它已经过时，而且如果我们想要灵活性和响应性，它可能会很麻烦。（如果你想知道原因，我写了一篇文章，介绍了用 CSS 绘制三角形的不同方法及其优缺点）。

我建议使用 clip-path 来绘制三角形以及以下一些多边形形状。使用 clip-path，我们可以指定一个路径（可以使用多边形、图像、实际路径等），来定义一个形状。路径之外的所有内容都会被裁剪掉。对于三角形，我们只需要三个点。

.triangle {
  width: 300px;
  height: 300px;
  background: black;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

梯形

另一个多边形。可以使用 clip-path 中的 polygon() 函数轻松创建。在本例中，我们将从一个矩形或正方形开始，需要四个点：底部的两个点位于角点，顶部的两个点位于内部。这样就完成了！

.trapezoid {
  width: 400px;
  height: 300px;
  background: black;
  clip-path: polygon(20% 0, 80% 0, 100% 100%, 0 100%);
}

八边形

我绘制了八边形，因为它很容易绘制（不需要计算任何东西或使用三角函数）。好消息是，clip-path/polygon() 方法可以扩展到任何多边形形状。

在本文中，我简化了点的位置，以避免它们占据整个屏幕；实际上，我们需要使用一些小数来得到一个八边形：

.octagon {
  width: 300px;
  height: 300px;
  background: black;
  clip-path: polygon(16.66% 16.66%, 50% 0, 83.33% 16.66%, 100% 50%,
                     83.33% 83.33%, 50% 100%, 16.66% 83.33%, 0 50%);
}

星形

星形是八边形的变体。唯一的区别是四个点的定位。在八边形中，它们位于外部；在星形中，它们位于内部（想象一个旋转的正方形）。

.spark {
  width: 300px;
  aspect-ratio: 1;
  background: black;
  clip-path: polygon(40% 40%, 50% 0, 60% 40%, 100% 50%,
                     60% 60%, 50% 100%, 40% 60%, 0 50%);
}

为了获得更酷的效果，可以将形状应用于 ::before 和 ::after 伪元素，而不是元素本身。然后将其中一个旋转 45 度（如果将旋转应用于 ::before，效果会更好看）。

月亮

月亮可以有很多形状。我们所说的月亮形状，指的是月牙形（或残月形）。我们可以通过从圆形开始并应用 box-shadow 来快速实现这种形状。box-shadow 允许五个值：水平偏移、垂直偏移、模糊度（可选）、缩放（可选）和颜色（可选，默认值为文本颜色）。根据我们想要的是月牙形还是残月形，我们会向右或向左添加一个大阴影。

.moon {
  width: 300px;
  aspect-ratio: 1;
  border-radius: 50%;
  box-shadow: -90px 0 0 80px black;
}

作为另一种实现方法，我建议使用遮罩而不是阴影。这是因为使用遮罩实现，月亮的绘制会清晰地定义在页面流中，因为它与用于绘制它的元素大小相匹配（我们可以使用内阴影来避免这个问题）。此外，遮罩比阴影更灵活。

.moon {
  width: 300px;
  aspect-ratio: 1;
  border-radius: 50%;
  -webkit-mask: radial-gradient(circle at 75% 50%, #0000 33%, #000 0);
}

污点/飞溅

这种形状比列表中的其他形状都更复杂。想法是使用重复的圆锥渐变，并应用滤镜使它们看起来更平滑。

你可以通过改变背景数量或大小来实现许多不同形状的这种效果。尝试一下，找到你最喜欢的形状。

.stain {
  width: 300px;
  height: 300px;
  background:
    repeating-conic-gradient(#000 0 3%, #0000 0 11%),
    repeating-conic-gradient(#0000 0 5%, #000 0 7%) 50% / 60% 60%,
    repeating-conic-gradient(#0000 0 7%, #000 0 9%) 50% / 70% 70%,
    repeating-conic-gradient(#0000 0 11%, #000 0 13%) 50% / 80% 80%,
    radial-gradient(#000 22%, #0000 0),
    #fff;
  mix-blend-mode: darken;
  filter: blur(10px) contrast(100) brightness(1)  grayscale(1);
  box-shadow: 0 0 0 50px #fff;
}

希望这篇文章能够帮助你学习用 CSS 代码绘制各种图形，并为你的网页设计增添更多乐趣和创意。如果你还有其他问题或想尝试更复杂的图形，欢迎在评论区留言，一起交流探索 CSS 的无限可能！