html个性代码用 CSS 代码绘制 16 种根本图形

这篇文章将带你一步步学习用 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 的无限可能！