Taiwans Flagge mit CSS zeichnen

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

CSS

Ich habe die gleiche Methode wie @alvaromontoro verwendet, um einen grundlegenden Hintergrund der Taiwan-Flagge zu erstellen: rote Hintergrundfarbe mit einem blauen Rechteck oben links.

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

Die Sonne

Ok, der einfachste Teil ist erledigt. Jetzt ist es Zeit für den echten Deal. Die Sonne auf der Flagge.

Es sieht ziemlich kompliziert aus, mit 12 Balken und einem Kreis in der Mitte. Wie ist es möglich, die Pseudoelemente ::before und ::after zum Zeichnen zu verwenden? Es fühlt sich so an, als ob nur der Clip-Pfad: path() die einzige Möglichkeit ist, dies zu tun, da path() jede gewünschte Form zeichnen kann. Allerdings hat clip-path: path() einen fatalen Nachteil: Es reagiert nicht! Das bedeutet, dass die Flagge nur eine Größe haben kann, wenn ich diesen Ansatz wähle.

Ich habe angefangen, viele SVG-Dateien der Taiwan-Flagge zu googeln. Und mir ist aufgefallen, dass sie nur zwei Elemente verwenden, um die Sonne darzustellen.

1. ein weißer 12-strahliger Stern
2. der weiße Kreis mit blauem Rand

Wenn der Kreis auf die Mitte des Sterns gelegt wird. Es sieht so aus, als gäbe es 12 Strahlen, die den Kreis mit einer gewünschten Lücke umgeben. So schlau!. Es scheint, als hätten Designer bereits diese clevere Möglichkeit gefunden, diese Sonne zu zeichnen. Mit diesem Ansatz kann ich ::before als Kreis und ::after als Stern verwenden.

12-strahliger Stern

Es ist sehr einfach, SVG-Dateien der Taiwan-Flagge zu finden. Leider werden alle Sterne von path() gezeichnet. Das liegt daran, dass path() reagiert, wenn es sich in einem echten

Es ist ein wirklich schwieriges Problem. Meine endgültige Lösung besteht wirklich darin, alle Positionen aller Punkte des 12-strahligen Sterns zu berechnen? Ich habe diesen fantastischen Online-SVG-Pfadeditor https://yqnn.github.io/svg-path-editor/ verwendet, um alle Punkte im Pfad zu visualisieren.

Und ich habe meinen lieben Bruder, der sehr gut in Mathe ist, gefragt, wo die restlichen Punkte stehen. Er löste mit mathematica 12 lineare Gleichungen und bekam alle Punkte! ?

Dann bin ich zum Pfadeditor zurückgekehrt, um den Umriss des Sterns als Pfad zu zeichnen und ihn so zu skalieren, dass er im 100*100-Bereich liegt.

Ich wandle dann alle Positionen in Prozentwerte um, da sie bereits im 100*100-Bereich liegen. Dadurch können wir den Stern auf der Flagge anzeigen

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

Der Kreis

Der Kreis ist relativ einfacher. Mein erster Versuch war jedoch die Verwendung der Grenze. Dies ist fehlgeschlagen, da die Breite des Rahmens nur px betragen darf. Ich habe auf Radialgradient umgestellt. Der knifflige Teil besteht darin, dass der Prozentsatz im radialen Gradienten die Diagonale des Elements sein muss, daher ist auch etwas Mathematik erforderlich, aber es ist nicht so schwer.

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

Ergebnis

Das vollständige CSS ist

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

Sie können sich unten auch meine Arbeit an Codepen ansehen

Ich hoffe, es gefällt dir!

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