Alvaro Montoro 展示：使用 CSS 享受旗帜乐趣

在本文中，我们将通过使用单个 HTML 元素为每个标志创建不同的标志来回顾 CSS 渐变。作为体验的一部分，我们还将检查 ::before 和 ::after 伪元素以及 Clip-path 属性。

我们将编写简单的标志并避免编写徽章，因为它们在 CSS 中会很困难。这并非不可能，但这也不值得做。为此使用 SVG。

我使用不同标志的维基百科页面来获取尺寸、大小、位置和颜色。如果其中有任何错误，我提前表示歉意。

搭建舞台

让我们首先添加标志的 HTML 代码以及一些常见的样式：

<div>





<pre class="brush:php;toolbar:false">.flag {
  display: inline-grid;
  height: 1em;
  vertical-align: top;
  position: relative;
  overflow: hidden;
}

以下是他们所做工作的简短说明：

• display: inline-grid：这将将元素（几乎）视为图像并与文本对齐显示。使用 inline-flex 或 inline-grid 将提供更强大的对齐可能性。
• height: 1em: 不同的旗帜有不同的尺寸。 通过设置固定高度，我们可以添加宽高比属性来生成适当的宽度，同时保持所有标志具有一致的高度。
• 位置：相对：如果我们需要伪元素，它们可能需要绝对位置，并且我们希望使我们的标志成为该绝对定位的参考点。
• 溢出：隐藏：如果伪元素由于任何原因溢出容器，我们希望从视图中隐藏溢出。
• 垂直对齐：顶部：将标志与文本对齐将使它们看起来更好，因为它们的对齐方式将“更自然”。

其中一些是过度设计的——是的，你可以过度设计 CSS——因为大多数标志不需要它们。尤其是我们将在本文中编写的代码……但最终您会发现一些需要这些属性的代码，为什么不直接将它们放在类中，而不是多次单独添加它们？

---

线性渐变

线性渐变创建在单个方向上渐进的颜色过渡（沿着一条线，因此得名）。 默认情况下，方向是从上到下垂直，这使得创建标志变得简单。

波兰

让我们从波兰国旗开始。它有两种占据相同高度的颜色：顶部是白色，底部是红色。这是您会发现的最简单的渐变之一。

.flag.poland {
  background: linear-gradient(white 50%, red 50%);
  aspect-ratio: 8 / 5;
}

此渐变将白色设置为从顶部开始的颜色，直到达到 50%（标志的一半），然后变为红色，也从 50% 开始。

我们还添加了纵横比：8 / 5；因为这是波兰国旗的官方比例 (5:8)。请随意忽略以下示例中的该属性，但请记住添加它，否则标志将没有宽度并且将不可见！

---

德国

CSS 渐变不限于两种颜色，可以有任意数量的颜色 - 但请注意，如果颜色太多，某些浏览器可能无法正确显示渐变。

德国国旗就是一个例子，我们从上到下有三种颜色：

<div>





<pre class="brush:php;toolbar:false">.flag {
  display: inline-grid;
  height: 1em;
  vertical-align: top;
  position: relative;
  overflow: hidden;
}

我们特意将这个示例的符号设置为多行且特别冗长。请注意我们如何在该值后面添加两个值。它们分别是每种颜色的起点和终点。在上面的示例中，黑色将从顶部 (0%) 开始，到达旗帜的三分之一 (33.33%)，红色将从顶部 (33.33%) 开始，到达旗帜的三分之二 (66.66%) ），最后，黄色将在 66.66% 之后直接开始，一直到旗子底部（100%）。在标志的情况下，结束值和随后的起始值将匹配，但如果不匹配，浏览器将逐渐过渡颜色。

考虑到第一个颜色默认从 0 开始，最后一个颜色默认以 100% 结束，我们可以从线性渐变中消除这些值。此外，任何低于前一个结束值的起始值都会导致颜色之间出现急剧停止。我们希望我们的标志也是如此，并且不想输入太多，所以我们可以为起始值设置最低的值：0% 或只是 0。这样，上面的 CSS 将被简化为产生的结果类似的结果，但要短得多：

.flag.poland {
  background: linear-gradient(white 50%, red 50%);
  aspect-ratio: 8 / 5;
}

---

比利时

如果我们只能生成垂直线性渐变，那就太无聊了，而且没用。有多种方法可以更改渐变绘制的方向。让我们检查其中几个：

• 用关键字指定方向：你想要颜色从右到左吗？用颜色列表前的左侧关键字表示。从下到上？到顶部。从左下角到右上角对角线？使用到右上角。真的就是这么简单！
• 指定动作角度：可能很棘手，但它比以前的选项提供了更多的可能性。您可以通过指示动作角度来选择任何方向，而不是仅限于八个。在这种情况下，0deg 为从下到上，90deg 为从左到右，180deg 为从上到下，270deg（或 -90deg）为从右到左。

我们以比利时国旗为例。颜色不是垂直堆叠而是水平堆叠：从左到右分别为黑色、黄色和红色。我们至少可以通过两种不同的方式来实现这一目标：

<div>





<pre class="brush:php;toolbar:false">.flag {
  display: inline-grid;
  height: 1em;
  vertical-align: top;
  position: relative;
  overflow: hidden;
}

---

径向渐变

径向渐变创建从一个原点到所有方向的渐进颜色过渡，生成看起来像颜色椭圆的径向效果（如果边相等，则为圆形）。 默认情况下，该点是元素的绝对中心 –水平和垂直。

需要考虑的一些重要事项：

• 它生成一个椭圆，而不是圆形。如果容器是矩形的，它看起来就像一个椭圆形。如果容器是方形的，它看起来像圆形。有关键字（circle）来保证生成的形状是圆形而不是椭圆形。
• 椭圆的大小随容器及其位置的不同而变化（稍后将详细介绍）。 0% 将是原点，100% 将是距该原点最远的角。我们可以使用关键字（closest-side、farthest-side、nearest-corner 等）来更改此设置。

记住这些初步想法（和关键字），让我们创建一些标志！

日本

日本国旗是白旗中央的一个大红圆圈。这是我们能找到的最简单的径向渐变之一，我们将使用之前回顾过的circle关键字，因为标志是矩形的，如果我们不使用它，我们将得到一个椭圆形。

.flag.poland {
  background: linear-gradient(white 50%, red 50%);
  aspect-ratio: 8 / 5;
}

我们将最接近边尺寸关键字与圆形关键字结合起来，生成高度为 60% 的圆形（因为顶部和底部边比左侧和右侧更近）。

---

孟加拉国

如果我们只能从元素的中心创建圆形和椭圆形，我们可以使用 CSS 复制一些标志（例如老挝或布隆迪）。尽管如此，我们还是无法开发其他偏离中心的圈子（例如哥斯达黎加或埃塞俄比亚）。

radial-gradient() 方法允许我们指示渐变的原点。我们通过在 size 和 shape 关键字（如果有）之后使用 at posX posY 来实现。让我们尝试用它创建孟加拉国的国旗：

<div>





<pre class="brush:php;toolbar:false">.flag {
  display: inline-grid;
  height: 1em;
  vertical-align: top;
  position: relative;
  overflow: hidden;
}

当我们开始移动渐变的中心时会发生什么？到最远角的距离发生了变化！这将导致三角计算来相应地调整大小……或者相反，我们可以识别不是最远角的不同参考点（如本例中的最近侧）。

为了避免这种情况，我们可以指定宽度和高度的绝对大小。如果我们这样做，我们将无法识别它是圆形还是椭圆形，因为这些绝对值将决定形状。

---

圆锥曲线渐变

圆锥渐变创建从一个原点绕其顺时针旋转的渐进颜色过渡。这样的可视化听起来可能很复杂，所以当我向人们解释它时，我更喜欢使用一个例子：想象一个规则的线性渐变打印在纸上（到目前为止，还不错）；现在你拿起纸张，折叠一侧并将其卷成圆锥形（因此得名！）所得的图形从上方看起来像圆锥渐变。我希望这对您有帮助。

与径向渐变一样，圆锥曲线渐变的默认原点是元素的绝对中心。同样作为径向渐变，我们可以通过使用 at posX posY 来更改该点。

贝宁

这是一个使用圆锥渐变创建的相当简单的标志。首先，我们需要将中心定位在水平 40%、垂直 50% 的位置，然后指定停止点。

.flag.poland {
  background: linear-gradient(white 50%, red 50%);
  aspect-ratio: 8 / 5;
}

正如我所说，小菜一碟！由于内容不多，关于贝宁国旗，有一个你可能不知道的事实：黄色代表国家的瑰宝，红色代表祖先的勇气，绿色代表民主的希望。

---

捷克共和国

在此基础上，我们来看看捷克国旗的绘制方法：

.flag.germany {
  aspect-ratio: 5 / 3;
  background: linear-gradient(
    #000  0.00%  33.33%,
    #f00 33.33%  66.66%,
    #fc0 66.66% 100.00%
  );
}

这工作得很好，但请注意我们如何使用 #fff 两次。如果我们只能使用它一次不是很好吗？正如您可能已经猜到的，答案是我们可以！梯度渐变不一定需要从 0 度开始。我们可以使用 from [angle] 指定起始位置。

例如，假设我们要从红色开始：

<div>





<pre class="brush:php;toolbar:false">.flag {
  display: inline-grid;
  height: 1em;
  vertical-align: top;
  position: relative;
  overflow: hidden;
}

角度可以是正值或负值，那么我们将分别顺时针或逆时针移动起点。

---

组合渐变

我们已经学习了如何使用线性、径向和圆锥渐变来生成相对简单的标志……但有时标志可能会变得复杂，单个渐变是行不通的。这种情况我们能做什么？

CSS 允许在一个元素中使用多个背景图像（和渐变）。我们需要用逗号分隔它们的值。因为这可能违反直觉，但要记住的一件重要事情是顶部背景将重叠并隐藏底部背景。

瑞典

瑞典国旗是蓝色背景上的黄色十字。我们可以使用线性渐变透明-黄色-透明生成每个黄色条：

.flag.poland {
  background: linear-gradient(white 50%, red 50%);
  aspect-ratio: 8 / 5;
}

这个例子的内容远不止表面上看的那样：

• 它展示了如何组合多个渐变 -用逗号分隔它们.
• 它添加了背景颜色。请注意颜色始终位于背景列表中的最后。如果将其放置在列表中的其他位置，它将无效并且不显示任何背景。
• 它使用绝对单位。到目前为止，我们一直使用百分比来表示渐变，但没有理由在方便时不使用其他单位。

---

巴哈马

虽然之前的标志显示了多个渐变效果，但由于使用了透明度，因此无法很好地展示它们如何堆叠。那么，让我们看另一个例子 – 使用不同类型的多个渐变。

.flag.germany {
  aspect-ratio: 5 / 3;
  background: linear-gradient(
    #000  0.00%  33.33%,
    #f00 33.33%  66.66%,
    #fc0 66.66% 100.00%
  );
}

组合背景时，您不仅限于一种渐变类型。您可以使用任何类型。

---

更改尺寸和位置

到目前为止，我们已经了解了线性、径向和圆锥渐变，以及如何组合它们。但在所有情况下，梯度占据了整个标志。有些透明胶片可能不会让它看起来那样，但渐变的大小始终是宽度和高度的 100%。

但是有一些方法可以改变渐变的大小以更好地满足我们的需求。最简单的一种是指定背景大小。如果尺寸小于容器，背景将重复（除非我们使用诸如background-repeat: none之类的东西。）

卡塔尔

让我们回顾一下带有卡塔尔国旗的示例。该标志重复一个图案九次，并且可以使用圆锥梯度轻松复制。如果我们指定渐变的宽度为flag的100%，高度为flag高度的九分之一，浏览器就会重复背景，直到容器被填满，为我们完成绘制。

<div>





<pre class="brush:php;toolbar:false">.flag {
  display: inline-grid;
  height: 1em;
  vertical-align: top;
  position: relative;
  overflow: hidden;
}

---

瑞典……又来了！

当然，一旦我们指定了尺寸，我们也可以指定渐变所在的位置。我们将使用背景位置来做到这一点（这就是背景重复属性会派上用场的地方）。

.flag.poland {
  background: linear-gradient(white 50%, red 50%);
  aspect-ratio: 8 / 5;
}

请注意，我们不需要指定最后一种颜色的大小和位置。只能设置一个，会自动占据整个容器。

我们可以用逗号分隔背景图像、大小和位置的值。当只有几个背景时，这很方便，但如果我们有多个背景，那就很麻烦了。很容易迷失方向并混淆价值观。

相反，我们可以使用background属性的缩写形式一次性提供所有值：background：渐变位置/大小重复，如下所示：

.flag.germany {
  aspect-ratio: 5 / 3;
  background: linear-gradient(
    #000  0.00%  33.33%,
    #f00 33.33%  66.66%,
    #fc0 66.66% 100.00%
  );
}

---

重复渐变

我们已经看到了线性、径向和圆锥渐变，但每种变化都允许我们添加“颜色图案”。旗帜非常适合此目的：许多旗帜由重复的水平线组成。

我说的是重复渐变。它们的行为与常规渐变相同，它们重复指定的图案，直到达到 100% 或 360 度。共有三个重复渐变：

• 重复线性渐变
• 重复径向渐变
• 重复圆锥曲线

希腊

我们以希腊国旗为例。我们可以使用 3 或 4 个大的线性渐变来实现它，或者我们可以使用三个重复的线性渐变：

• 一个重复的线性渐变来生成十字的垂直部分（使用透明和白色）
• 第二个重复线性渐变来生成十字的水平部分（使用蓝色和白色）
• 最后一个重复线性渐变来绘制后面的九个条。

为了实现左上角的十字，我们必须定义前两个线性渐变的位置和大小。

.flag.germany {
  aspect-ratio: 5 / 3;
  background: linear-gradient(#000 33.33%, #f00 0 66.66%, #fc0 0);
}

---

乌干达

乌干达的国旗上有一只美丽的灰冠鹤，出于实际原因，我们不会在 CSS 中对其进行编码。我们将重点关注另外两个标志部分：中心的白色圆圈和几条黑色、黄色和红色的水平线。

这个组合可以通过两种不同的方式实现：

• 使用占据旗帜整个高度的重复线性渐变；或
• 单个线性渐变仅占据标志的一半，浏览器将自动重复它以填充剩余空间。

第一个选项是这样的：

<div>





<pre class="brush:php;toolbar:false">.flag {
  display: inline-grid;
  height: 1em;
  vertical-align: top;
  position: relative;
  overflow: hidden;
}

第二个选项如下所示：

.flag.poland {
  background: linear-gradient(white 50%, red 50%);
  aspect-ratio: 8 / 5;
}

但这两个选项最终看起来都是一样的。重要的是要记住，在 CSS 中，就像在任何其他编程风格中一样，通常有不止一种方法可以实现我们的目标。

---

使用伪元素

术语“单元素标志”可能会产生误导。所有非空 HTML 元素至少包括两个我们可以用来绘制的伪元素：::before 和 ::after。因此，我们确实拥有三个可以单独设计样式并提供多种可能性的元素：

• 需要一些旋转的绘图。在 CSS 中使用背景的一个限制是它们无法旋转。
• 复杂的形状可以受益于使用边框半径、剪辑路径、遮罩的强大功能...
• 为了使设计看起来更干净：剪切路径的边缘比渐变的边缘更平滑。

巴林

如果您如上所述使用渐变对卡塔尔国旗进行编码，您可能会注意到渐变的三角形边缘在某些显示器上看起来过于锋利且丑陋。有很多方法可以解决这个问题，但我喜欢的一个解决方案是使用带有剪辑路径的伪元素来使线条更平滑、更清晰。

与使用多个线性渐变和下一节中解释的像素差异技巧相比，此选项将简化代码。

.flag.germany {
  aspect-ratio: 5 / 3;
  background: linear-gradient(
    #000  0.00%  33.33%,
    #f00 33.33%  66.66%,
    #fc0 66.66% 100.00%
  );
}

这种情况下的伪元素不必局限于复杂的模式。以古巴、巴哈马或约旦的国旗为例。它们的左侧有我们使用圆锥渐变绘制的三角形。这些渐变有一个问题：边缘在某些显示器上看起来太硬或像素化——下一节中有一个使用线性渐变解决这个问题的技巧——。相反，我们可以使用伪元素（三点多边形路径）创建三角形，并且边缘看起来会更平滑。类似于上面的巴林国旗。

---

巴拿马

我获得了五点星形顶点的近似点，并在 ::before 和 ::after 伪元素中使用 Clip-path 应用它们。许多CSS艺术家会考虑使用剪辑路径作弊，并且可以使用圆锥渐变来绘制星形。但为了简单起见，我将其保留为剪辑路径。

添加圆锥渐变作为国旗背景，以及伪元素中的星星，我们很快就可以画出巴拿马国旗：

<div>





<pre class="brush:php;toolbar:false">.flag {
  display: inline-grid;
  height: 1em;
  vertical-align: top;
  position: relative;
  overflow: hidden;
}

---

提醒和提示

堆叠渐变

请记住，当您组合背景时，它们将按照列出的顺序堆叠。这意味着，第一个将位于顶部并与下面的重叠，然后是。

虽然从设计的角度来看是有意义的，但从 CSS 的角度来看可能是违反直觉的，因为级联使得属性或类的最后一次出现优先于之前定义的属性或类。

1px 差异技巧

在文章中，我提到渐变边缘可能看起来太锐利或像素化。发生这种情况是因为浏览器渲染渐变的方式 - 这很烦人，特别是因为 SVG 上的硬停止边缘不会发生这种情况。

例如，这里的线条在所有显示器上看起来可能不太好：

.flag.poland {
  background: linear-gradient(white 50%, red 50%);
  aspect-ratio: 8 / 5;
}

避免这种情况的一个技巧是在端点和下一个起点之间添加像素差异。可以分别从其中每个减去或添加 0.5px，或者更简单，只需从其中一个减去/添加 1px。这条线在所有显示器上看起来都很平滑：

.flag.germany {
  aspect-ratio: 5 / 3;
  background: linear-gradient(
    #000  0.00%  33.33%,
    #f00 33.33%  66.66%,
    #fc0 66.66% 100.00%
  );
}

不要忘记重复渐变中的 0

使用重复渐变时的一个常见错误是没有为第一种颜色添加起点。这将导致渐变看起来很时髦。如果您的重复渐变没有按预期工作，请务必验证您是否在其中添加了 0（或任何值）！

不要害怕伪元素

伪元素一开始可能会令人生畏，但它们与任何其他元素没有什么不同，它们只是附加到 HTML 元素上。

不要忘记为 content 属性添加一个值（当您只想让它出现时，空字符串很常见）。否则，伪元素将不可见！

Clip-Path 是您的朋友

在CSS中绘图和创建CSS Art时，很多人会声称使用clip-path属性是作弊。它使事情变得更容易，并且是您腰带上的有用工具。我不会因为它是“作弊”就丢弃它。

学习如何使用剪辑路径 - 和蒙版！ - 它最终会在项目中派上用场。

结论

现在是时候练习 CSS 渐变了。请尝试一下并尝试自己重新创建一些标志。以下是具有良好旗帜可供练习的国家/地区列表（按复杂程度排序）：

• 摩纳哥
• 也门
• 阿拉伯联合酋长国
• 老挝
• 冰岛
• 多米尼加共和国（无国徽）
• 圣卢西亚

请记住：没有唯一的标志编码方式。其中每一个都可以通过多种不同的方式来完成。使用您更熟悉或知道看起来最好的渐变。