查看多哥國旗的維基百科頁面，其描述為：

• 綠色和黃色交替的五個水平條紋
• 左上角有一個方形的紅色區(qū)域
• 紅場上的五角白星
• 比例為 3:5（每 3 個高度單位對應(yīng) 5 個寬度單位）

至于顏色，我們將使用：

• #006a4e 綠色
• #ffce00 代表黃色
• #d21034 為紅色
• #fff 白色

超文本標(biāo)記語言

我們將使用單個 HTML 元素對此標(biāo)志進行編碼：

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

通過縱橫比，我們設(shè)置標(biāo)志的比例（在這種情況下寬度優(yōu)先）。我們設(shè)置了一個相對位置，因為我們將使用絕對定位的偽元素來繪制星星，并且我們希望將其保留在標(biāo)志容器內(nèi)。

對于背景，我們需要五個水平條：綠色、黃色、綠色、黃色和綠色。這是綠色和黃色的重復(fù)圖案，可以使用重復(fù)線性漸變輕松編碼：

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

現(xiàn)在我們有了條形，我們需要左上角的紅色方塊。我們可以使用偽元素，但相反，我們將向背景添加另一個漸變：

.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)。而且我們需要確保它不重復(fù)（no-repeat），否則，它會占據(jù)整個容器，所有東西都會變成紅色。

有了這個，我們就有了旗幟的底座，我們需要畫星星。我們可以用圓錐梯度來做到這一點，但這會是一個小麻煩。相反，我們將使用偽元素，然后使用 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%);
}

注意：這些是星星的近似點。我們可以使用三角學(xué)來使其完美。但這將是一個足夠好的近似值。
這樣，我們就完成了！多哥國旗的整個 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 添加到標(biāo)志的樣式中，我們將能夠使其與文本對齊。在這種情況下，我們需要設(shè)置高度或?qū)挾?，以便縱橫比屬性可以發(fā)揮其魔力并自動設(shè)置其他值。

通過畫這面旗幟，我們練習(xí)了：

• 定位：相對和絕對
• 漸變：線性和重復(fù)線性
• 縱橫比：設(shè)置旗幟和星星的大小
• 剪輯路徑：塑造星星
• 偽元素：創(chuàng)建星星本身

我希望您喜歡這個簡短的教程。我計劃很快發(fā)布一個帶有其他標(biāo)志的新版本，解釋不同梯度如何工作——而不僅僅是線性梯度。敬請留意！

以上是使用 CSS 繪制多哥國旗的詳細(xì)內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！