CSS 能够创建各种形状。 正方形和矩形很容易，因为它们是网页的自然形状。 添加 width 和 height，您就可以得到所需的精确尺寸的矩形。 添加 border-radius，您可以将该形状圆角化，如果圆角足够大，则可以将这些矩形变成圆形和椭圆形。
我们还可以在 CSS 中使用 ::before 和 ::after 伪元素，这为我们提供了可以在原始元素中添加两个更多形状的可能性。 通过巧妙地运用定位、变换以及许多其他技巧，我们只需使用一个 HTML 元素就可以在 CSS 中创建 许多形状。
如今，绘制形状的最佳选择是使用 SVG，使用 clip-path 或 CSS 蒙版。 例如，请查看此 CSS 形状集合、这些 SVG 图标集、此 clip-path 编辑器 以及 此 CSS 剪裁简介。 本文最初是在这两种技术真正流行之前撰写的！
总是很酷地看到人们在 CSS 中创建什么形状。也许接下来可以讨论一下仍然使用 CSS 的“原因”？我发现自己会回顾几年前 Sara Soueidan 的这些幻灯片，她在其中甚至提到了人们用 CSS 创建的酷炫形状，但也许用 SVG 会更好？
https://slides.com/sarasoueidan/building-better-interfaces-with-svg#/9
我认为 SVG 通常更好
这是一种值得用黄金（请用英镑）收藏的简单技巧。
非常感谢。
您好，感谢分享，我只有一个疑问，五边形只能使用纯色吗？我需要一个只有轮廓的透明五边形。
嗨，Oscar，好问题！是的，形状需要纯色，因为它依赖于
border-color，并且它只接受颜色值。如果您正在寻找一个只有轮廓的五边形形状，那么您可能需要考虑使用 SVG。这将允许您绘制路径并在其上设置描边，而无需填充形状本身。
https://cssicon.space/
https://cssicon.space/#/animate/arrow-left/to/arrow-right
它拥有丰富的 CSS 形状和带有动画的图标集合。
我终于学会了 CSS 形状。谢谢谢谢谢谢谢谢谢谢谢谢谢谢谢谢！