三个步骤教你使用CSS绘制Facebook图标

CSS能够制作各种形状。正方形和矩形很容易，因为它们是网络的自然形状。添加一个宽度和高度，你将拥有所需的确切大小的矩形。添加

border-radius

，你可以对该形状进行倒圆，并且足够多的形状可以将这些矩形变成圆形和椭圆形。

我们还在CSS中获得了

::before

和

::after

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

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

HTML

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

<div class="facebook-icon"></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);
}
           

现在，我们将创建字母“ f”的水平部分，包括曲线。最简单的方法是创建一个带有粗边框的透明圆角矩形。像这样：

.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

以完成魔术。

.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;
}
           

你的图标应该是这样的：

不错，不是吗？这时，你会感觉到胜利的气味。只剩下“ f”的水平部分的最后一位。我想你可以弄清楚该怎么做。

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

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

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

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