如何制作单个 div 标志

由 Mux 主办的 DEV 全球展示挑战赛：展示你的项目！

我喜欢创作 CSS 艺术；这是提升技能的最佳途径之一——制作动态列布局只能教会你这么多东西。

在这篇短文中，我想向你展示如何仅使用 CSS 创建这个单 div 图标。
欢迎在 CodePen 上创建一个示例并跟着操作！

入门

在开始编写任何代码之前，请先查看Mihai Dolganiuc在 Dribbble 上的作品——我们正在构建的徽标是基于他的作品集中的一个徽标。

创建新笔刷时，我首先会定义要使用的颜色，设置一个漂亮的背景色，并将画布居中。本例中使用的是 SCSS，但您也可以根据需要使用 CSS 变量。

$background: #ebf5fc;

$light-blue: #00cdfc;
$dark-blue: #007fe8;


body {
  display: flex;
  min-height: 100vh;
  justify-content: center;
  align-items: center;
  background: $background;
}

这样就得到了漂亮的米白色，并确保我们添加的任何标记（接下来会提到）都会在屏幕上居中显示。

好了！我们来把这个div元素添加到HTML里。我会给它加上一个类名，logo这样我们就可以在CSS里定位到它了。

<div class="logo"></div>

思考问题

现在到了有趣的部分。我能想到的唯一简单实现这种效果的方法就是使用伪元素。伪元素允许你对元素的特定部分进行样式设置。虽然有很多伪元素选择器，但这个::before选择器允许我们在元素之前添加内容。在我们的例子中，我们可以利用这个::before选择器将圆角正方形叠加在蓝色圆圈之上。

综合起来

既然我们已经有了解决方案，那就让我们开始把所有东西组合起来吧。我们先从蓝色圆圈开始。

.logo {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  // 1
  background: linear-gradient(to bottom left, $dark-blue 15%, $light-blue); 
  // 2
  position: relative;
}

这里有几点重要事项我想指出。

1. 我们使用线性渐变填充圆圈。这样可以在深蓝色和浅蓝色之间实现平滑过渡。15% 的透明度会让深蓝色在渐变中更靠后的位置出现，使其看起来更加突出。

2. 因为我们将使用伪元素来表示圆角正方形，所以我们需要确保能够根据圆的位置来定位该元素。这就是我们position: relative在这里使用它的原因。

上面的 CSS 代码产生了以下结果：

现在简单的部分已经完成了，让我们开始制作圆角正方形吧。

首先，确定::before选择器。因为我使用的是 SCSS，所以我可以把这个选择器嵌套在我的类选择器里。

.logo {
  ...

  &::before {


  }
}

选择::before器本身不会起作用；我们需要先设置元素的内容、位置、背景和大小。

&::before {
    // 1
    content: "";
    // 2
    position: absolute;
    // 3
    bottom: 60px;
    left: 60px;
    width: 150px;
    height: 150px;
    background: #ea2f98;
  }

1. 因为我们使用了::before选择器，所以需要包含该content属性。该属性用于向元素添加内容，在本例中，我们将其设置为空字符串。如果该content属性未包含在规则中，则元素将根本不会显示。

2. 因为我们已经设置了圆的坐标，position现在relative我们可以通过在这里设置，根据圆的位置来定位这个圆角正方形position: absolute。

3. 我们将该元素从蓝色圆圈的底部向左移动 60 像素，从蓝色圆圈的左侧向右移动 60 像素。

差不多完成了——非常棒！我们来加上圆角，再用边框做出描边效果。

&::before {
    ...
    border-radius: 60px;
    border: 12px solid $background;
  }

至此，我们基本达到了预期效果。最后一个主要步骤是应用渐变效果。

重新检查该background属性，并使用线性渐变代替粉色。
为了让蓝色圆圈透过圆角正方形显示出来，我们需要让正方形的左下角略微半透明。我们可以通过使用rgba()并将 alpha 值设置为 0 来实现这一点0.8。

&::before {
    ...
    background: linear-gradient(
      to bottom left,
      rgba(249, 180, 70, 1) 15%,
      rgba(234, 47, 152, 0.8)
    );
    ...
  }

因为我们使用了伪元素并将其与圆形偏移，所以整个徽标现在偏离中心。要解决这个问题，我们可以简单地回到规则.logo并添加一些边距。

.logo {
  margin: 100px 100px 0 0;
  ...
}

结论

好了，我们借助伪元素和一些渐变效果，创建了一个单div图标！其实并没有那么难，对吧？

最终结果如下：

请在CodePen上查看Braydon Coyer ( @braydoncoyer )的Pen Single Div Logo。

我相信还有其他方法可以达到这种效果——请在下方评论区告诉我你的方法！

如果您喜欢学习更多关于 CSS 的知识，欢迎订阅我的新闻邮件并在Twitter上关注我！

感谢阅读！