本文共 1736 字，大约阅读时间需要 5 分钟。

CSS能够制作各种形状。正方形和矩形很容易，因为它们是网络的自然形状。添加一个宽度和高度，你将拥有所需的确切大小的矩形。添加border-radius，你可以对该形状进行倒圆，并且足够多的形状可以将这些矩形变成圆形和椭圆形。

我们还在CSS中获得了::before和::after伪元素，这使我们有可能再添加两个形状到原始元素中。通过巧妙地定位，变换和许多其他技巧，我们只需一个HTML元素即可在CSS中制作许多形状。

在本教程中，我将向你展示如何使用纯CSS创建Facebook图标。在开始之前，我假设你可以创建简单的形状，例如正方形，圆形，三角形和梯形。

HTML

如你所知，为了创建CSS形状，我们通常使用divs。在这里，我们只需要一个div。

CSS

希望你对伪元素::before和有一个清晰的了解::after，因为我将在本项目中使用它们。伪元素通过删除不必要的div来帮助我们保持html的清洁。

首先，我们将创建背景。它应该有relative位置，因为根据背景更容易对齐形状。

.facebook-icon {       position: relative;    height: 200px;    width: 200px;    background: #0277bd;    border-radius: 20px;    box-shadow: 0 0 30px rgba(0,0,0,0.3);}

.facebook-icon::before {       content: "";    position: absolute;    background: #0277bd;    width: 140px;    height: 220px;    bottom: -50px;    right: -75px;    border: 30px solid #fff;    border-radius: 40px;    box-sizing: border-box;}

此时，它应如下所示：

.facebook-icon {       border-right: 25px solid #0277bd;    overflow: hidden;    box-sizing: border-box;}

总结一下，你的CSS应该是这样的：

.facebook-icon {     position: relative;  height: 200px;  width: 200px;  background: #0277bd;  border-right: 25px solid #0277bd;  border-radius: 20px;  box-shadow: 0 0 30px rgba(0,0,0,0.3);  overflow: hidden;  box-sizing: border-box;}

你的图标应该是这样的：

如果你认为我们需要绘制梯形或梯形，无论你叫什么，那都是对的。仔细看。它不仅仅是一个矩形，它的右侧从顶部向内倾斜一点。

在继续之前，请尝试自行完成。如果操作不正确，请检查以下代码。

.facebook-icon::after {      content: "";   position: absolute;   width: 90px;   height: 0;   border-top: 30px solid #fff;   border-right: 5px solid transparent;   right: 0;   top: 95px;}

做完了！经过所有这些努力（是吗？🤔），你将获得以下内容：