用 CSS 繪製台灣國旗-css教學-PHP中文網

用 CSS 繪製台灣國旗

Mary-Kate Olsen

發布： 2024-11-24 11:24:11

原創

198 人瀏覽過

@alvaromontoro 的作品給我留下了深刻的印象

用 CSS 繪製多哥國旗

阿爾瓦羅·蒙托羅·11 月 19 日

#css #html #webdev

使用單一 div 和一堆神奇的 CSS 繪製多哥國旗。這對我來說確實令人興奮。因此，我想做同樣的事情。這是我的做法。

超文本標記語言

我新增一個

;具有一些 aria 屬性。這將是渲染標誌的單一。

<div role="img" aria-label="Flag of Taiwan" class="flag taiwan"></div>

登入後複製

CSS

我使用與@alvaromontoro相同的方法創建了台灣國旗的基本背景：紅色背景色，左上角有一個藍色矩形。

.flag.taiwan {
  aspect-ratio: 3 / 2;
  height: 500px;
  position: relative;
  background: linear-gradient(rgb(19, 53, 129) 0 0) 0 0 / 50% 50% no-repeat,
    rgb(205, 44, 36);
}

登入後複製

Drawing Taiwan

太陽報

好了，最簡單的部分完成了。現在是真正的交易的時候了。太陽照在旗幟上。
Drawing Taiwan
看起來相當複雜，有12根梁，中心有一個圓。如何使用偽元素 ::before 和 ::after 來繪製它們？感覺只有 Clip-path: path() 是唯一的方法，因為 path() 可以畫出我們想要的任何形狀。然而，clip-path:path()有一個致命的缺點：它沒有回應！這意味著如果我選擇這種方法，旗幟只能有一種尺寸。

我開始在谷歌上搜尋許多台灣國旗的 SVG 檔案。我注意到他們只使用 2 個元素來代表太陽。

一顆白色十二道光束星
有藍色邊框的白色圓圈

Drawing Taiwan

Drawing Taiwan
當圓圈放在星星的中心。看起來有 12 根光束圍繞著圓圈，並具有所需的間隙。太聰明了！看起來設計師們已經想出了這種繪製太陽的巧妙方法。透過採用這種方法，我可以使用 ::before 作為圓圈，使用 ::after 作為星號。

12光束星

很容易找到台灣國旗的SVG檔。不幸的是，所有的星星都是由path()繪製的。這是因為 path() 在真實的

這是一個非常困難的問題。我最終的解決方案真的是計算12束星所有點的所有位置嗎？我利用這個出色的線上 SVG 路徑編輯器 https://yqnn.github.io/svg-path-editor/ 來視覺化路徑中的所有點。

Drawing Taiwan
我問我親愛的數學很好的兄弟，其餘的點的位置是什麼。他用mathematica解了12個線性方程式並得到了所有分數！？

Drawing Taiwan

然後，我回到路徑編輯器，繪製星星的輪廓作為路徑，並對其進行縮放，使其處於 100*100 的範圍內。

Drawing Taiwan

然後我將所有位置轉換為百分比，因為它已經在 100*100 範圍內。結果，我們可以在旗幟上顯示星星

<div role="img" aria-label="Flag of Taiwan" class="flag taiwan"></div>

登入後複製

Drawing Taiwan

圈子

圈子相對來說比較容易。然而，我的第一次嘗試是使用邊框。失敗是因為邊框的寬度只能是px。我改為使用徑向漸層。棘手的部分是徑向漸變的百分比需要是元素的對角線，因此它還需要一些數學運算，但這並不難。

.flag.taiwan {
  aspect-ratio: 3 / 2;
  height: 500px;
  position: relative;
  background: linear-gradient(rgb(19, 53, 129) 0 0) 0 0 / 50% 50% no-repeat,
    rgb(205, 44, 36);
}

登入後複製

結果

完整的 CSS 是

&::after {
    content: '';
    position: absolute;
    top: 6.25%;
    left: 12.5%;
    width: 25%;
    height: calc(3 / 8 * 100%);
    background: white;
    clip-path: polygon(50% 0%,56.6987% 25%,75% 6.6987%,68.3013% 31.6987%,93.3013% 25%,75% 43.3013%,100% 50%,75% 56.6987%,93.3013% 75%,68.3013% 68.3013%,75% 93.3013%,56.6987% 75%,50% 100%,43.3013% 75%,25% 93.3013%,31.6987% 68.3013%,6.6983% 75%,25% 56.6987%,0% 50%,25% 43.3013%,6.6983% 25%,31.6987% 31.6987%,25% 6.6983%,43.3013% 25%);;
  }

登入後複製

您也可以在下面查看我在 codepen 上的工作

希望你喜歡！

以上是用 CSS 繪製台灣國旗的詳細內容。更多資訊請關注PHP中文網其他相關文章！