Logo

菜单

发布于 2026-01-06 1 阅读
0

CSS Logos：每日开发 Logo DEV 的全球展示挑战赛，由 Mux 呈现：展示你的项目！

CSS Logo：每日开发 Logo

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

当然，我忍不住用 CSS 重新设计了我雇主的 logo。我们说的当然是daily.dev。

该标志本身看起来像是一些基本形状，如下图所示。

daily.dev 标志

分析标志

从标志上看，我们可以看到它由三个不同的部分组成。

  • 左边的正方形
  • 中间那条线
  • 右边的箭头

从某种角度来看，你可以把左边部分看作一个d，但这会让事情变得更加复杂。

这个设置有几个地方比较棘手。
正方形的边角是圆角，里面还有一个正方形。
中间的线有梯形边框。
箭头是圆角的，所以我们不能用 HTML 箭头。

别担心，我们会解决这个问题的。

CSS daily.dev 标志

让我们先来准备所有需要的元素。

<div class="dd">
  <div class="square"></div>
  <div class="stripe"></div>
  <div class="arrow"></div>
</div>
Enter fullscreen mode Exit fullscreen mode

如您所见，我试图根据我在分析部分中描述的内容来命名。

好的，我们还要添加一些可以重复使用的默认CSS 变量。

:root {
  --bg: #151618;
  --radius: 20px;
  --gray: #989899;
}
Enter fullscreen mode Exit fullscreen mode

至于主体部分，我们希望将其设为背景色，并将所有内容居中显示在主体内。

body {
  background: var(--bg);
  display: grid;
  place-items: center;
  min-height: 100vh;
  margin: 0;
  padding: 0;
}
Enter fullscreen mode Exit fullscreen mode

接下来我们要处理外层 div 元素，我想把它设置成一个固定的大小。它本身不具备缩放功能，但你可以通过调整它的大小和边框半径来实现缩放。

.dd {
  position: relative;
  width: 350px;
  aspect-ratio: 350/200;
  overflow: hidden;
}
Enter fullscreen mode Exit fullscreen mode

接下来我们来创建正方形元素。这部分比较简单，我们只需要添加一个圆角正方形，然后使用 ` :before` 伪元素在它内部叠加另一个正方形。
之后，我们旋转整个正方形并调整其位置。

注：本文将使用 SCSS，因为它更容易进行可视化解释。

.square {
  width: 42.857%;
  aspect-ratio: 1;
  background: white;
  border-radius: var(--radius);
  transform: rotate(45deg);
  top: 11.5%;
  position: absolute;
  left: 6.571%;
  z-index: 1;
  display: grid;
  place-items: center;
  &:before {
    content: '';
    width: 50%;
    aspect-ratio: 1;
    background: var(--bg);
    position: absolute;
  }
}
Enter fullscreen mode Exit fullscreen mode

这样一来，我们应该得到如下正方形。

daily.dev 标志的方形元素

接下来我们需要的是中间的条纹。
它也可以是旋转后的矩形。

我们还设置了左上角和右下角的边框半径，以与徽标相呼应。

.stripe {
  width: 11.429%;
  height: 130%;
  background: white;
  position: absolute;
  transform: rotate(45deg);
  border-radius: var(--radius) 0px var(--radius) 0px;
  left: 44.286%;
  top: -16%;
  z-index: 3;
}
Enter fullscreen mode Exit fullscreen mode

daily.dev 标志方形和条纹

这个元素的难点在于，我们希望倾斜的三角形稍后能切掉正方形和箭头的一部分。
我决定再次使用伪元素。我创建了另一个矩形，但使用倾斜变换使其看起来像梯形。

.stripe {
  &:before,
  &:after {
    content: '';
    position: absolute;
    width: 35%;
    height: 100%;
    background: var(--bg);
  }
  &:before {
    left: -35%;
    bottom: 7%;
    transform: skewY(71deg);
  }
  &:after {
    right: -35%;
    top: 7%;
    transform: skewY(71deg);
  }
}
Enter fullscreen mode Exit fullscreen mode

在下面的图片中，我把形状涂成了粉红色，这样你就能看到发生了什么。

daily.dev 标志上的梯形图案

太好了，如果我们把它们涂成黑色，就能得到我们想要的形状了。
现在只剩下右边的箭头了。

如前所述，这种形状有圆角，这使得事情变得稍微复杂一些。

（当处理直角时，我们可以给用户显示一个只有两条边可见的正方形框）

不过别担心，伪元素又派上用场了。
对于箭头，我们使用两个相互重叠的圆角矩形。

.arrow {
  position: absolute;
  width: 11.429%;
  height: 150%;
  left: 78.286%;
  top: 31.5%;
  z-index: 2;
  &:before,
  &:after {
    content: '';
    position: absolute;
    background: var(--gray);
    border-radius: var(--radius);
    display: block;
    left: -5%;
    height: 50%;
    width: 100%;
    transform: rotate(45deg);
  }
  &:after {
    bottom: 76%;
    transform: rotate(-45deg);
  }
}
Enter fullscreen mode Exit fullscreen mode

在下面的图片中，我把一个涂成红色，一个涂成蓝色，这样你就能看到发生了什么。

CSS 中的圆角箭头

就是这样。想知道结果吗？
看看这个 CodePen 示例吧。

感谢阅读，让我们保持联系！

感谢您阅读我的博客。欢迎订阅我的电子邮件简讯，也可以在Facebook或Twitter上关注我。

文章来源：https://dev.to/dailydevtips1/css-logos-daily-dev-logo-3dfh
CSS、LESS 和 SASS 的...
Anvil平台：仅使用Python...