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

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

至於顏色，我們將使用：

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

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

我們將使用單一 HTML 元素對此標(biāo)誌進(jìn)行編碼：

<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è)定了一個(gè)相對位置，因?yàn)槲覀儗⑹褂媒^對定位的偽元素來繪製星星，並且我們希望將其保留在標(biāo)誌容器內(nèi)。

對於背景，我們需要五個(gè)水平條：綠色、黃色、綠色、黃色和綠色。這是綠色和黃色的重複圖案，可以使用重複線性漸變輕鬆編碼：

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

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

.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%);
}

這個(gè)新漸變將是完全紅色的(#d21034 0 0)，位於旗幟的左上角(0 0)，寬度為旗幟的36%，高度為旗幟的60% (36% 60% ），因此它保持3:5 的比例，使其成為正方形(36 = 60 * 3 / 5)。而且我們需要確保它不重複（no-repeat），否則，它會佔(zhàn)據(jù)整個(gè)容器，所有東西都會變成紅色。

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

註：這些是星星的近似點(diǎn)。我們可以使用三角學(xué)來使其完美。但這將是一個(gè)足夠好的近似值。
這樣，我們就完成了！多哥國旗的整個(gè) 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í)了：

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

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

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