type
status
date
slug
summary
tags
category
icon
password
长方形
最初，HTML 中的所有内容都是一个矩形。所以，绘制矩形很简单；指定宽度和高度。如果这不起作用，您可以使用具有内联显示的元素，切换到块或内联块元素，应该没问题。
正方形
正方形是宽度和高度具有相同值的矩形。我们可以采用矩形代码并将高度更改为与宽度相同的值，如下所示：
这可行，但是...如果我们想改变正方形的大小，我们需要每次更新两个值。这不是一个大问题，但是在 CSS 中，我们有一个属性可以aspect-ratio让我们指定宽度和高度之间的关系。设置值1也会产生具有相同代码行的正方形，但现在我们只需要更新一行代码即可调整其大小：
圆圈
从正方形开始，我们需要设置一个圆形。我们通过使用border-radius并将其分配给一个相当大的百分比值（50％或更高即可）来实现这一点。十分简单。
椭圆
椭圆形是类似于圆形的圆形形状，但它不是正方形，而是基于矩形。（椭圆有一个更准确和技术性的定义，但我现在就满足这个定义。）因此，我们将border-radius像圆形一样添加属性，但添加到矩形而不是正方形。
椭圆形/卵形
椭圆形和椭圆形并不相同。内圆相互交叉或不交叉有一些技术定义，但为了简单起见，我们将认为椭圆形类似于鸡蛋。我们通过使用属性的两个值border-radius来实现这个形状。是的，有两组，每组最多 4 个值：水平半径和垂直半径，以正斜杠 ( /) 分隔。
我们将水平半径设置为100%，然后为顶角指定较大的垂直半径值，为底角指定较小的值。像这样的东西：
这些值取决于矩形的大小。太大的值可能会导致平顶，而太小的值可能会导致平底。您可能需要使用数字来获得您想要的形状。
钟
钟形是一个夸张的卵形，一侧长且圆形，另一侧平坦（尽管仍然具有柔和的曲线）。要获得此形状，请取一个椭圆形，并将较大的值设置得较大，较小的值较小。
如果您创建 CSS Art，此形状可以方便地用于身体甚至面部（稍微调整半径值）。
拱
省略号和钟形的轻微变化，拱形底部平坦，顶部弯曲。没有玩弄这个的价值观; 我们可以将 border-radius 属性设置为固定值：
通过这种方法，如果元素的宽度是高度的两倍，我们将得到半圆形而不是拱形形状。
眼睛
三个形状中的第一个需要轻微旋转。我们将从一个正方形开始，然后设置两个相对角的边界半径，同时将其他两个角保留为零。我总是从左上角开始并添加 45 度旋转，但您可以选择任何其他角并相应地调整旋转。
您可以使用该rotate: 45deg属性或也可以transform: rotate(45deg)。无论哪种方式都会起作用。至于边框半径，值越高，眼睛曲率就越柔和（重复值以允许一侧比另一侧高：。80% 0 100% 0）
眼泪
有趣的是，泪水形状是眼睛形状的变体。相同的代码，只需更改边框半径：将三个半径最大化以获得圆形形状，并将最后一个角半径保留为零，以便它以一个点结束。
心
绘制心形与之前的形状略有不同，因为它将使用 element 和Both::before以及::after伪元素。我们从一个正方形开始，将其旋转 45 度，然后添加伪元素作为圆形（见上文）。我们将一个伪水平平移，另一个垂直平移（当元素旋转时，两者都会对角地查找），然后就完成了。代码可能看起来“复杂”，但想法很简单。
三角形
许多在线文章讨论如何使用边框、高度/宽度为零和一些透明颜色来绘制三角形。我强烈反对这种做法。虽然它有效，但它已经过时了，如果我们想要灵活性和响应能力，它可能会很麻烦。（如果你想了解更多原因，我写了一篇文章，用不同的方法在 CSS 中绘制三角形，以及它们的优缺点）。
相反，我建议使用它clip-path来绘制三角形以及以下一些多边形形状。使用clip-path，我们指定一个定义形状的路径（可以使用多边形、图像、实际路径等）。该形状之外的所有内容都将被剪掉。对于三角形，我们只需要 3 个点。
梯形
另一个多边形。polygon()使用中的功能很容易制作clip-path。在这种情况下，我们将从一个矩形或正方形开始，我们需要四个点：底部的点位于角落，顶部的点稍微位于内部。我们完成了！
八边形
我做了八边形，因为它很容易做（不需要计算任何东西或使用三角学）。好消息是clip-path/polygon()方法可以外推到任何多边形形状。
在视频中，我简化了这些点，这样它们就不会占据整个屏幕；实际上，我们需要使用一些十进制数来获得八边形：
火花
火花是八边形的变体。唯一的区别是其中四个点的位置。在八角形内时，它们朝向外侧；在火花中，它们将朝向内部（想象一个旋转的正方形）。
为了获得更酷的效果，不要将形状应用于元素本身，而是应用于::before伪::after元素。然后旋转 45 度（如果将此旋转应用于 ，看起来会更好::before。）
月亮
月亮可以有多种形式。我们所说的月亮形状是指新月形（或渐减形）。我们可以通过从圆形开始并应用 来box-shadow快速实现这一点。框阴影允许五个值：水平平移、垂直平移、模糊度（可选）、比例（可选）和颜色（可选，默认文本颜色）。根据我们想要新月形还是渐减形，我们将在右侧或左侧添加一个大阴影。
作为替代实现，我建议使用遮罩而不是阴影。这是因为通过遮罩实现，月亮的绘制在页面流程中明确定义，并且它与用于绘制它的元素的大小相匹配（我们可以使用插入阴影来避免此问题）。另外，蒙版比阴影提供更多的灵活性。
污渍/飞溅
这个形状比这个列表中的所有其他形状更复杂。我写了一篇关于如何创建它的更详细的文章（包括分步视频）。这个想法是重复圆锥曲线梯度并应用滤镜使它们看起来平滑。
您可以通过更改背景的数量或其大小来以许多不同的形状实现此效果。尝试一下，找到你最喜欢的一个。
- 作者:Jeffrey
- 链接:https://notion-next-ashy-five.vercel.app//article/blog-8
- 声明:本文采用 CC BY-NC-SA 4.0 许可协议，转载请注明出处。