Taiwans Flagge mit CSS zeichnen-CSS-Tutorial-php.cn

Taiwans Flagge mit CSS zeichnen

Mary-Kate Olsen

Freigeben： 2024-11-24 11:24:11

Original

234 Leute haben es durchsucht

Ich war sehr beeindruckt von der Arbeit von @alvaromontoro

Togos Flagge mit CSS zeichnen

Alvaro Montoro ・ 19. November

#css #html #webdev

Eine Togo-Flagge mit einem einzelnen Div und einer Menge magischem CSS zu zeichnen. Für mich ist es wirklich überwältigend. Deshalb möchte ich das Gleiche tun. So habe ich es gemacht.

HTML

Ich füge ein

mit einigen Arienattributen. Dies wird das einzige

sein, um die Flagge zu rendern.

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

Nach dem Login kopieren

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

Nach dem Login kopieren

Drawing Taiwan

Die Sonne

Ok, der einfachste Teil ist erledigt. Jetzt ist es Zeit für den echten Deal. Die Sonne auf der Flagge.
Drawing Taiwan
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.

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

Drawing Taiwan

Drawing Taiwan
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.

Drawing Taiwan
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! ?

Drawing Taiwan

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.

Drawing Taiwan

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>

Nach dem Login kopieren

Drawing Taiwan

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

Nach dem Login kopieren

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

Nach dem Login kopieren

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!