Dessiner le drapeau de Taiwan avec CSS-tutoriel CSS-php.cn

Dessiner le drapeau de Taiwan avec CSS

Mary-Kate Olsen

Libérer： 2024-11-24 11:24:11

original

234 Les gens l'ont consulté

J'ai été très impressionné par le travail de @alvaromontoro

Dessiner le drapeau du Togo avec CSS

Alvaro Montoro ・ 19 novembre

#css #html #webdev

de dessiner un drapeau du Togo avec un un seul div et un tas de CSS magique. C'est vraiment époustouflant pour moi. Par conséquent, je veux faire la même chose. Voici comment je l'ai fait.

HTML

J'en ajoute un

avec quelques attributs d'air. Ce sera le seul

à rendre le drapeau.

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

Copier après la connexion

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

Copier après la connexion

Drawing Taiwan

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

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

Drawing Taiwan

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

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

Drawing Taiwan

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.

Drawing Taiwan

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>

Copier après la connexion

Drawing Taiwan

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

Copier après la connexion

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

Copier après la connexion

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!