HTMLとCSSのみを使用してMuar Flagを作成する方法

バンダル マハラニとしても知られるムアルは、人気の観光地であるジョホール州にある魅力的なマレーシアの町です。

ムアールの人気の朝食スポット。

故郷に敬意を表するために、HTML と CSS だけを使用してムアールの国旗を作成しました。 デザイン ソフトウェア、SVG、画像は使用されていません。

ムアールの国旗は、四分割されたデザインが特徴です。

左上の象限は赤で、白い五芒星と三日月で飾られています。

第 2 象限と第 3 象限は黒、右下の象限は黄色で、赤い五芒星と三日月も特徴です。

ステップ 1: フラグの HTML 構造

HTML の基礎は単純です。<div> はフラグ コンテナとして機能します。 ネストされた <div> 要素は 2 つの行を作成し、それぞれがさらに 2 つの列に分割されます。これにより、明確な 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: フレックスボックスのレイアウト

フレックスボックスはレイアウトを簡素化します。 .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: 色とセクションを定義する

旗は 4 つの異なるセクションに分かれています。

CSS 変数には、より適切に整理するためにカラー 16 進コードが保存されます:

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

ステップ 4: 三日月を作成する

三日月のベースとして円が使用されます。 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>

結果

Muar フラグは、HTML と CSS のみを使用して正常に再作成されました。ミーバンドンの時間です!

以上がHTMLとCSSのみを使用してMuar Flagを作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。