使用 CSS 绘制多哥国旗

查看多哥国旗的维基百科页面，其描述为：

• 绿色和黄色交替的五个水平条纹
• 左上角有一个方形的红色区域
• 红场上的五角白星
• 比例为 3:5（每 3 个高度单位对应 5 个宽度单位）

至于颜色，我们将使用：

• #006a4e 绿色
• #ffce00 代表黄色
• #d21034 为红色
• #fff 白色

超文本标记语言

我们将使用单个 HTML 元素对此标志进行编码：

<div role="img" aria-label="Flag of Togo">



<p>For accessibility reasons, we added a couple of attributes:<br>
role="img" to indicate the element represents an image.<br>
aria-label="Flag of Togo" so assistive technologies can announce the image as Togo's flag.</p>

<p>Maybe it would be better to have a second visually-hidden element with the flag's "alternative text" linked with an aria-labelledby, but we'll keep it as a single element for simplicity.</p>
<h2>
  
  
  CSS
</h2>

<p>Let's start by setting the flag properties that will be needed:<br>
</p>

<pre class="brush:php;toolbar:false">.flag.togo {
  aspect-ratio: 5 / 3;
  position: relative;
}

通过纵横比，我们设置标志的比例（在这种情况下宽度优先）。我们设置了一个相对位置，因为我们将使用绝对定位的伪元素来绘制星星，并且我们希望将其保留在标志容器内。

对于背景，我们需要五个水平条：绿色、黄色、绿色、黄色和绿色。这是绿色和黄色的重复图案，可以使用重复线性渐变轻松编码：

.flag.togo {
  aspect-ratio: 5 / 3;
  position: relative;
  background: repeating-linear-gradient(#006a4e 0 20%, #ffce00 0 40%);
}

现在我们有了条形，我们需要左上角的红色方块。我们可以使用伪元素，但相反，我们将向背景添加另一个渐变：

.flag.togo {
  aspect-ratio: 5 / 3;
  position: relative;
  background: 
    linear-gradient(#d21034 0 0) 0 0 / 36% 60% no-repeat,
    repeating-linear-gradient(#006a4e 0 20%, #ffce00 0 40%);
}

这个新渐变将是完全红色的 (#d21034 0 0)，位于旗帜的左上角 (0 0)，宽度为旗帜的 36%，高度为旗帜的 60% (36% 60% ），因此它保持 3:5 的比例，使其成为正方形 (36 = 60 * 3 / 5)。而且我们需要确保它不重复（no-repeat），否则，它会占据整个容器，所有东西都会变成红色。

有了这个，我们就有了旗帜的底座，我们需要画星星。我们可以用圆锥梯度来做到这一点，但这会是一个小麻烦。相反，我们将使用伪元素，然后使用 Clip-path 将其裁剪为星形：

.flag.togo::before {
  content: "";
  width: 20%;
  aspect-ratio: 1;
  position: absolute;
  /* half of the size of the red square */
  left: 18%;
  top: 30%;
  /* translated half its size to top and left to center it */
  transform: translate(-50%, -50%);
  background: #fff;
  clip-path: polygon(50% 2%, 62% 39%, 100% 39%, 69% 61%, 81% 98%, 
                     50% 75%, 19% 98%, 31% 61%, 0% 39%, 38% 39%);
}

注意：这些是星星的近似点。我们可以使用三角学来使其完美。但这将是一个足够好的近似值。
这样，我们就完成了！多哥国旗的整个 CSS 代码为：

.flag.togo {
  aspect-ratio: 5 / 3;
  position: relative;
  background: 
    linear-gradient(#d21034 0 0) 0 0 / 36% 60% no-repeat,
    repeating-linear-gradient(#006a4e 0 20%, #ffce00 0 40%);

  &::before {
    content: "";
    width: 20%;
    aspect-ratio: 1;
    position: absolute;
    left: 18%;
    top: 30%;
    background: #fff;
    clip-path: polygon(50% 2%, 62% 39%, 100% 39%, 69% 61%, 81% 98%, 
                       50% 75%, 19% 98%, 31% 61%, 0% 39%, 38% 39%);
  }
}

一些想法

如果我们将 display: inline-block 添加到标志的样式中，我们将能够使其与文本对齐。在这种情况下，我们需要设置高度或宽度，以便纵横比属性可以发挥其魔力并自动设置其他值。

通过画这面旗帜，我们练习了：

• 定位：相对和绝对
• 渐变：线性和重复线性
• 纵横比：设置旗帜和星星的大小
• 剪辑路径：塑造星星
• 伪元素：创建星星本身

我希望您喜欢这个简短的教程。我计划很快发布一个带有其他标志的新版本，解释不同梯度如何工作——而不仅仅是线性梯度。敬请留意！

以上是使用 CSS 绘制多哥国旗的详细内容。更多信息请关注PHP中文网其他相关文章！