如何僅使用 HTML 和 CSS 建立麻坡旗幟

麻坡，也稱為班達爾馬哈拉尼 (Bandar Maharani)，是一個迷人的馬來西亞小鎮，位於熱門的旅遊勝地柔佛州。

麻坡最受歡迎的早餐地點。

為了向我的家鄉致敬，我只使用 HTML 和 CSS 製作了一面麻坡旗幟。 沒有使用設計軟體、SVG 或影像。

麻坡旗採用四分設計。

左上象限為紅色，飾有白色五角星和新月。

第二和第三象限為黑色，右下象限為黃色，也帶有紅色五角星和新月。

第 1 步：標誌的 HTML 結構

HTML 基礎很簡單：<div> 充當標誌容器。 嵌套的 <div> 元素建立兩行，每行進一步分成兩列。這提供了清晰的 2x2 網格。

<code class="language-html"><div class="flag">
  <!-- Row 1 -->
  <div class="row">
    <div class="column red-1-left"></div>
    <div class="column black-1-right"></div>
  </div>
  <!-- Row 2 -->
  <div class="row">
    <div class="column black-2-left"></div>
    <div class="column yellow-2-right"></div>
  </div>
</div></code>

這種結構確保了乾淨、有組織的佈局。

每個象限都有一個獨特的類別（例如“red-1-left”、“yellow-2-right”）用於樣式設定。

第 2 步：Flexbox 版面

Flexbox 簡化了版面。 .row 類別使用 flex-direction: row 進行水平排列，而 .column 使用 flex-direction: column 和 flex: 1 來確保均勻的列分佈和每列內正確的形狀定位。

<code class="language-css">.row {
  display: flex;
  flex-direction: row;
}

.column {
  display: flex;
  flex-direction: column;
  flex: 1;
}</code>

第 3 步：定義顏色和剖面

旗幟分為四個不同的部分。

CSS 變數儲存顏色十六進位程式碼以更好地組織：

<code class="language-css">:root {
  --red: #ce1126;
  --white: #ffffff;
  --yellow: #ffff00;
  --black: #000000;
}</code>

.flag 類別設定整體標誌尺寸和黑色背景：

<code class="language-css">.flag {
  background-color: var(--black);
  width: 800px;
  height: 400px;
}</code>

red-1-left 和 yellow-2-right 類別定義各自的背景顏色和高度：

<code class="language-html"><div class="flag">
  <!-- Row 1 -->
  <div class="row">
    <div class="column red-1-left"></div>
    <div class="column black-1-right"></div>
  </div>
  <!-- Row 2 -->
  <div class="row">
    <div class="column black-2-left"></div>
    <div class="column yellow-2-right"></div>
  </div>
</div></code>

第四步：建立新月

使用圓形作為新月形的基礎。 border-radius: 50% 創造一個完美的圓圈。 調整尺寸、邊距和 box-shadow 以形成新月形：

<code class="language-css">.row {
  display: flex;
  flex-direction: row;
}

.column {
  display: flex;
  flex-direction: column;
  flex: 1;
}</code>

第 5 步：建構星星

星形將 clip-path 屬性與 polygon() 函數結合使用。 精確的百分比值定義了星星的分數。 transform: rotate(-13deg); 建立輕微傾斜：

<code class="language-css">:root {
  --red: #ce1126;
  --white: #ffffff;
  --yellow: #ffff00;
  --black: #000000;
}</code>

結果

僅使用 HTML 和 CSS 就成功重新創建了麻坡旗幟。是時候來點萬隆面了！

以上是如何僅使用 HTML 和 CSS 建立麻坡旗幟的詳細內容。更多資訊請關注PHP中文網其他相關文章！