Wie ich eine Muar-Flagge nur mit HTML und CSS erstelle

Muar, auch bekannt als Bandar Maharani, ist eine charmante malaysische Stadt in Johor, einem beliebten Touristenziel.

Ein beliebter Frühstücksort in Muar.

Um meiner Heimatstadt Tribut zu zollen, habe ich eine Muar-Flagge nur mit HTML und CSS erstellt. Es wurden keine Designsoftware, SVGs oder Bilder verwendet.

Die Muar-Flagge hat ein gevierteltes Design.

Der obere linke Quadrant ist rot und mit einem weißen fünfzackigen Stern und einem Halbmond geschmückt.

Der zweite und dritte Quadrant sind schwarz, während der untere rechte Quadrant gelb ist und ebenfalls einen roten fünfzackigen Stern und eine Sichel aufweist.

Schritt 1: HTML-Struktur für die Flagge

Die HTML-Grundlage ist unkompliziert: Ein <div> fungiert als Flag-Container. Verschachtelte <div>-Elemente erzeugen zwei Zeilen, die jeweils weiter in zwei Spalten unterteilt sind. Dadurch entsteht ein klares 2x2-Raster.

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

Diese Struktur gewährleistet ein sauberes, organisiertes Layout.

Jeder Quadrant erhält eine eindeutige Klasse (z. B. „rot-1-links“, „gelb-2-rechts“) für das Styling.

Schritt 2: Flexbox-Layout

Flexbox vereinfacht das Layout. Die .row-Klasse verwendet flex-direction: row für die horizontale Anordnung, während .column flex-direction: column und flex: 1 verwendet, um eine gleichmäßige Spaltenverteilung und die richtige Formpositionierung innerhalb jeder Spalte sicherzustellen.

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

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

Schritt 3: Farben und Abschnitte definieren

Die Flagge ist in vier verschiedene Abschnitte unterteilt.

CSS-Variablen speichern Farb-Hex-Codes zur besseren Organisation:

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

Die Klasse .flag legt die Gesamtabmessungen der Flagge und den schwarzen Hintergrund fest:

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

Die Klassen red-1-left und yellow-2-right definieren ihre jeweiligen Hintergrundfarben und -höhen:

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

Schritt 4: Den Halbmond erschaffen

Ein Kreis dient als Basis für den Halbmond. border-radius: 50% Erstellt einen perfekten Kreis. Abmessungen, Ränder und box-shadow werden angepasst, um den Halbmond zu formen:

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

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

Schritt 5: Konstruieren des Sterns

Der Stern verwendet die Eigenschaft clip-path mit der Funktion polygon(). Präzise Prozentwerte definieren die Punkte des Sterns. transform: rotate(-13deg); erzeugt die leichte Schräge:

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

Ergebnis

Die Muar-Flagge wurde erfolgreich nur mit HTML und CSS neu erstellt. Zeit für etwas Mee Bandung!

Das obige ist der detaillierte Inhalt vonWie ich eine Muar-Flagge nur mit HTML und CSS erstelle. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!