使用 CSS 繪製多哥國旗-css教學-PHP中文網

使用 CSS 繪製多哥國旗

Susan Sarandon

發布： 2024-11-22 11:54:14

原創

307 人瀏覽過

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

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

Drawing Togo

至於顏色，我們將使用：

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

登入後複製

Drawing Togo

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

.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），否則，它會佔據整個容器，所有東西都會變成紅色。

Drawing Togo

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

登入後複製

Drawing Togo