Togos Flagge mit CSS zeichnen

Wenn ich auf der Wikipedia-Seite nach der Flagge Togos suche, wird sie wie folgt beschrieben:

• Fünf horizontale Streifen im Wechsel zwischen Grün und Gelb
• Ein quadratisches rotes Feld in der oberen linken Ecke
• Ein fünfzackiger weißer Stern auf dem roten Feld
• Es hat ein Verhältnis von 3:5 (5 Breiteneinheiten für je 3 Höheneinheiten)

Was die Farben betrifft, verwenden wir:

• #006a4e für das Grün
• #ffce00 für die Gelben
• #d21034 für das Rote
• #fff für die Weißen

HTML

Wir werden dieses Flag mit einem einzelnen HTML-Element codieren:

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

Mit „aspect-ratio“ legen wir die Proportionen der Flagge fest (in diesem Fall steht die Breite an erster Stelle). Und wir legen eine relative Position fest, weil wir den Stern mit einem absolut positionierten Pseudoelement zeichnen und ihn im Flaggencontainer behalten wollen.

Für den Hintergrund benötigen wir fünf horizontale Streifen: grün, gelb, grün, gelb und grün. Dies ist ein sich wiederholendes Muster aus Grün- und Gelbtönen, das leicht mit einem sich wiederholenden linearen Farbverlauf codiert werden kann:

.flag.togo {
  aspect-ratio: 5 / 3;
  position: relative;
  background: repeating-linear-gradient(#006a4e 0 20%, #ffce00 0 40%);
}

Da wir nun die Balken haben, brauchen wir das rote Quadrat oben links. Wir könnten ein Pseudoelement verwenden, aber stattdessen fügen wir dem Hintergrund einen weiteren Farbverlauf hinzu:

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

Dieser neue Farbverlauf wird komplett rot sein (#d21034 0 0), oben links auf der Flagge positioniert (0 0), mit einer Breite von 36 % und einer Höhe von 60 % der Flagge (36 % 60 %). ), sodass das Verhältnis 3:5 beibehalten wird, wodurch ein Quadrat entsteht (36 = 60 * 3 / 5). Und wir müssen sicherstellen, dass es sich nicht wiederholt (No-Repeat), sonst belegt es den gesamten Container und alles wird rot.

Damit haben wir die Basis für die Flagge und müssen den Stern zeichnen. Wir könnten es mit konischen Farbverläufen machen, aber das würde ein wenig nervig sein. Stattdessen verwenden wir ein Pseudoelement und schneiden es dann mit clip-path:
in die Sternform zu

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

Hinweis: Dies sind ungefähre Punkte für den Stern. Wir könnten Trigonometrie verwenden, um es perfekt zu machen. Dies wird jedoch als ausreichend gute Annäherung funktionieren.
Damit sind wir fertig! Der gesamte CSS-Code für die Flagge Togos wäre:

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

Einige Gedanken

Wenn wir den Stilen der Flagge einen display:inline-Block hinzufügen, können wir ihn an den Text anpassen. In diesem Fall müssen wir eine Höhe oder Breite festlegen, damit die Eigenschaft „Seitenverhältnis“ ihre Wirkung entfalten und automatisch den anderen Wert festlegen kann.

Durch das Zeichnen dieser Flagge haben wir Folgendes geübt:

• Positionierung: relativ und absolut
• Verläufe: linear und sich wiederholend linear
• Seitenverhältnisse: zum Festlegen der Flaggen- und Sterngrößen
• Clip-Pfade: um den Stern zu formen
• Pseudoelemente: um den Stern selbst zu erschaffen

Ich hoffe, Ihnen hat dieses kurze Tutorial gefallen. Ich habe vor, in Kürze ein neues mit anderen Flags zu veröffentlichen, in dem erklärt wird, wie die verschiedenen Farbverläufe funktionieren – nicht nur die linearen. Halten Sie Ausschau danach!

Das obige ist der detaillierte Inhalt vonTogos Flagge mit CSS zeichnen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!