Dessiner le drapeau de Taiwan avec CSS

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

CSS

J'ai utilisé la même méthode que @alvaromontoro pour créer un arrière-plan de base du drapeau de Taiwan : couleur de fond rouge avec un rectangle bleu en haut à gauche.

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

Le Soleil

Ok, la partie la plus simple est terminée. Il est maintenant temps de passer aux choses sérieuses. Le soleil sur le drapeau.

Cela a l'air assez compliqué, avec 12 faisceaux et un cercle au centre. Comment est-il possible d'utiliser les pseudo éléments ::before et ::after pour les dessiner ? On a l'impression que seul le clip-path : path() est le seul moyen de le faire car path() peut dessiner n'importe quelle forme que nous voulons. Cependant, clip-path: path() a un inconvénient fatal : il n'est pas réactif ! Cela signifie que le drapeau ne peut avoir qu'une seule taille si je choisis cette approche.

J'ai commencé à rechercher sur Google de nombreux fichiers SVG du drapeau de Taiwan. Et j'ai remarqué qu'ils n'utilisent que 2 éléments pour représenter le soleil.

1. une étoile blanche à 12 faisceaux
2. le cercle blanc avec une bordure bleue

Lorsque le cercle est posé au centre de l'étoile. Il semble qu'il y ait 12 faisceaux entourant le cercle avec un écart souhaité. Tellement intelligent !. Il semble que les designers aient déjà trouvé cette manière astucieuse de dessiner ce soleil. En adoptant cette approche, je peux utiliser ::before comme cercle et ::after comme étoile.

étoile à 12 faisceaux

Il est très facile de trouver des fichiers SVG du drapeau de Taiwan. Malheureusement, toutes les étoiles sont dessinées par path(). C'est parce que path() est réactif lorsqu'il se trouve dans un fichier réel

C'est un problème vraiment difficile. Ma solution finale est vraiment de calculer toutes les positions de toutes les pointes de l'étoile à 12 faisceaux ? J'ai utilisé ce fantastique éditeur de chemin SVG en lignehttps://yqnn.github.io/svg-path-editor/ pour visualiser tous les points du chemin.

Et j'ai demandé à mon cher frère qui est très bon en maths quelles sont les positions du reste des points. Il a utilisé mathematica pour résoudre 12 équations linéaires et a obtenu tous les points ! ?

Ensuite, j'ai utilisé l'éditeur de chemin pour dessiner le contour de l'étoile comme chemin et je l'ai mis à l'échelle pour qu'il soit dans une portée de 100*100.

Je convertis ensuite toutes les positions en pourcentages puisque c'est déjà dans un périmètre 100*100. De ce fait, on peut afficher l'étoile sur le drapeau

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

Le cercle

Le cercle est relativement plus facile. Cependant, ma première tentative a consisté à utiliser la frontière. Cela a échoué car la largeur de la bordure ne peut être que de px. J'ai changé pour utiliser le dégradé radial. La partie délicate est que le pourcentage en dégradé radial doit être la diagonale de l'élément, donc cela nécessite également quelques calculs, mais ce n'est pas si difficile.

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

Résultat

Le CSS complet est

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

Vous pouvez également consulter mon travail sur codepen ci-dessous

J'espère que vous l'aimerez !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!