矩形
最初，HTML 中的所有内容都是矩形。因此，矩形很容易绘制;指定宽度和高度。如果这不起作用，您可以使用带有内联显示的元素，切换到块或内联块元素，您应该没问题。
.rectangle {
width: 500px;
height: 300px;
background: black;
}
CSS 代码旁边的矩形以生成矩形
广场
正方形是宽度和高度具有相同值的矩形。我们可以采用矩形代码并将高度更改为与宽度相同的值，如下所示：
.square {
width: 300px;
height: 300px;
background: black;
}
那行得通，但是......如果我们想改变正方形的大小，我们每次都需要更新两个值。这不是一个大问题，但在 CSS 中，我们有 aspect-ratio 属性，它允许我们指定宽度和高度之间的关系。设置值 or（如视频中所示）也会产生一个包含相同代码行的正方形，但现在我们只需要更新一行代码来调整它的大小：11 / 1
.square {
width: 300px;
aspect-ratio: 1;
background: black;
}
CSS代码旁边的正方形来绘制一个正方形
圈
从正方形开始，我们需要设置一个圆形。我们通过使用 border-radius 并将其分配给一个相当大的百分比值（50% 或更高）来实现这一点。简单易行。
.circle {
width: 300px;
aspect-ratio: 1;
background: black;
border-radius: 50%;
}
CSS代码旁边的圆圈，用于绘制圆圈
椭圆
椭圆是像圆形一样的圆形，但不是正方形，而是基于矩形。（椭圆有一个更准确和技术性的定义，但我现在只用这个定义。因此，我们将像圆形一样添加属性，但将其添加到矩形而不是正方形中。border-radius
.ellipse {
width: 300px;
height: 400px;
background: black;
border-radius: 50%;
}
用于绘制椭圆的代码旁边的椭圆
椭圆形/卵形
椭圆和椭圆是不一样的。内圈是否相互交叉有一些技术定义，但为了简单起见，我们将考虑椭圆形类似于鸡蛋。我们通过使用 border-radius 属性的两个值来实现此形状。是的，有两组，每组最多 4 个值：水平半径，然后用正斜杠 （） 分隔垂直半径。/
我们将水平半径设置为 ，然后为顶角指定较大的垂直半径值，为底角指定较小的垂直半径值。像这样的东西：100%
.oval {
width: 300px;
height: 400px;
background: black;
border-radius: 100% / 120% 120% 75% 75%;
}
这些值将取决于矩形的大小。太大的值可能以平坦的顶部结束，而太小的值可能以平坦的底部结束。您可能需要玩弄数字才能获得所需的形状。
绘制椭圆所需的 CSS 代码旁边的椭圆形
钟
铃铛是一种夸张的卵形，一侧长而圆，另一侧是扁平的（尽管仍然具有柔和的曲线）。要获得此形状，请取一个椭圆形，并使大值变大，小值变小。
如果您创建 CSS 艺术，则此形状可以方便地用于身体甚至面部（稍微调整半径值）。
.bell {
width: 300px;
height: 400px;
background: black;
border-radius: 100% / 160% 160% 25% 25%;
}
CSS 代码旁边的铃铛形状，用于绘制铃铛
拱
椭圆和钟形略有变化，拱形底部平坦，顶部弯曲。这个值没有玩弄;我们可以将 border-radius 属性设置为固定值：
.arch {
width: 300px;
height: 400px;
background: black;
border-radius: 50% / 100% 100% 0% 0%;
}
使用这种方法，如果元素的宽度是高度的两倍，我们将得到一个半圆形而不是拱形。
CSS 代码旁边的拱形，用于绘制拱形
眼睛
三个形状中的第一种形状，需要稍微旋转。我们将从一个正方形开始，然后设置两个相对角的边框半径，同时将其他两个角保留为零。我总是从左上角开始并添加 45 度旋转，但您可以选择任何其他角落并相应地调整旋转。
.eye {
width: 300px;
aspect-ratio: 1;
background: black;
rotate: 45deg;
border-radius: 80% 0;
}
您可以使用该属性或 .无论哪种方式都可以。至于边框半径，该值越高，眼睛曲率越柔和（重复值以允许一侧比另一侧高：.）rotate: 45degtransform: rotate(45deg)80% 0 100% 0
用CSS代码画眼睛的眼睛形状
撕
有趣的是，眼泪的形状是眼睛形状的变体。相同的代码，只是更改了边框半径：最大化三个半径以获得圆形，并将最后一个角半径保留为零，使其以一个点结束。
.tear {
width: 300px;
aspect-ratio: 1;
background: black;
rotate: 45deg;
border-radius: 0 50% 50% 50%;
}
CSS 代码旁边的撕裂形状，用于绘制撕裂形状
心
绘制心形与前面的形状略有不同，因为它将使用元素以及 ：：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代码旁边的一颗心画一颗心
三角形
许多在线文章讨论了如何使用边框、高度/宽度为零和一些透明颜色绘制三角形。我强烈反对这种做法。虽然它有效，但它是老式的，如果我们想要灵活性和响应能力，可能会很麻烦。（如果你想了解更多关于为什么，我写了一篇文章，用不同的方法在CSS中绘制三角形，它们的优缺点）。
相反，我建议使用 clip-path 来绘制三角形 - 以及以下一些多边形形状。使用 clip-path，我们指定定义形状的路径（可以使用多边形、图像、实际路径等）。该形状之外的所有内容都将被剪裁。在三角形的情况下，我们只需要 3 个点。
.triangle {
width: 300px;
height: 300px;
background: black;
clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
CSS代码旁边的三角形，用于绘制三角形
梯形
另一个多边形。使用中的函数很容易制作。在这种情况下，我们将从一个矩形或正方形开始，我们需要四个点：底部的点在角落里，顶部的点稍微在里面。我们完成了！polygon()clip-path
.trapezoid {
width: 400px;
height: 300px;
background: black;
clip-path: polygon(20% 0, 80% 0, 100% 100%, 0 100%);
}
CSS 代码旁边的梯形，用于绘制梯形
八角形
我做了八边形，因为它很容易做到（不需要计算任何东西或使用三角学）。好消息是 / 方法可以外推到任何多边形形状。clip-pathpolygon()
在视频中，我简化了点，这样它们就不会占据整个屏幕;实际上，我们需要使用一些十进制数来获得八边形：
.octagon {
width: 300px;
height: 300px;
background: black;
clip-path: polygon(16.6% 16.6%, 50% 0, 83.3% 16.6%, 100% 50%,
83.3% 83.3%, 50% 100%, 16.6% 83.3%, 0 50%);
}
CSS 代码旁边的八边形，用于绘制八边形
火花
火花是八边形的变体。唯一的区别是其中四个点的位置。在八角形中，它们朝向外面;在火花中，它们将朝向内部（想象一个旋转的正方形）。
.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%);
}
为了获得更酷的效果，不要将形状应用于元素本身，而是应用于元素和伪元素。然后将一个旋转 45 度（如果将此旋转应用于 .::before::after::before
CSS 代码旁边的四点火花形状来绘制它
月亮
月亮可以有多种形式。我们所说的月亮形状是指新月形（或渐变）。我们可以从圆形开始并应用框阴影来快速实现这一点。框阴影允许五个值：水平平移、垂直平移、模糊度（可选）、缩放（可选）和颜色（可选，默认为文本颜色）。根据我们是想要新月形还是渐变形，我们会在右边或左边添加一个大阴影。
.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);
}
CSS 代码旁边的递减月亮来绘制它
污渍/飞溅
此形状比此列表中的所有其他形状都更复杂。我写了一篇关于如何创建它的更详细的文章（包括一个分步视频）。这个想法是具有重复的圆锥渐变并应用过滤器以使它们看起来平滑。
您可以通过更改背景的数量或其大小来实现许多不同形状的效果。玩一玩，找到你最喜欢的那个。
.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;
}
用代码染色形状