Dessiner le drapeau du Togo avec CSS

En vérifiant la page Wikipédia du drapeau du Togo, elle le décrit comme :

• Cinq bandes horizontales alternant entre le vert et le jaune
• Un champ carré rouge dans le coin supérieur gauche
• Une étoile blanche à cinq branches sur fond rouge
• Il a une proportion de 3:5 (5 unités de largeur pour 3 unités de hauteur)

Quant aux couleurs, nous utiliserons :

• #006a4e pour le vert
• #ffce00 pour le jaune
• #d21034 pour le rouge
• #fff pour le blanc

HTML

Nous coderons ce drapeau à l'aide d'un seul élément HTML :

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

Avec le rapport hauteur/largeur, nous définissons les proportions du drapeau (la largeur passe en premier dans ce cas). Et nous définissons une position relative car nous dessinerons l'étoile en utilisant un pseudo-élément à position absolue et nous voulons la conserver dans le conteneur de drapeau.

Pour le fond, nous avons besoin de cinq bandes horizontales : verte, jaune, verte, jaune et verte. Il s'agit d'un motif répétitif de verts et de jaunes qui peut être facilement codé à l'aide d'un dégradé linéaire répétitif :

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

Maintenant que nous avons les barres, nous avons besoin du carré rouge en haut à gauche. Nous pourrions utiliser un pseudo-élément, mais à la place, nous ajouterons un autre dégradé à l'arrière-plan :

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

Ce nouveau dégradé sera entièrement rouge (#d21034 0 0), positionné en haut à gauche du drapeau (0 0), avec une largeur de 36% et une hauteur de 60% du drapeau (36% 60% ) il conserve donc la proportion 3:5 qui en fera un carré (36 = 60 * 3/5). Et nous devons nous assurer que cela ne se répète pas (pas de répétition), sinon cela occupera tout le conteneur et tout sera rouge.

Avec cela, nous avons la base du drapeau, et nous devons dessiner l'étoile. Nous pourrions le faire avec des dégradés coniques, mais ce serait une petite douleur dans le cou. Au lieu de cela, nous utiliserons un pseudo-élément, puis le recadrerons en forme d'étoile à l'aide du chemin de clip :

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

Remarque : ce sont des points approximatifs pour l'étoile. Nous pourrions utiliser la trigonométrie pour le rendre parfait. Mais cela fonctionnera comme une assez bonne approximation.
Avec ça, c'est fini ! L'ensemble du code CSS du drapeau du Togo serait :

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

Quelques réflexions

Si nous ajoutons un display: inline-block aux styles du drapeau, nous pourrons l'avoir en ligne avec le texte. Dans ce cas, nous devrons définir une hauteur ou une largeur pour que la propriété aspect-ratio puisse faire sa magie et définir automatiquement l'autre valeur.

En dessinant ce drapeau, nous avons pratiqué :

• Positionnement : relatif et absolu
• Dégradés : linéaires et linéaires répétitifs
• Rapports d'aspect : pour définir la taille du drapeau et de l'étoile
• Clip-paths : pour façonner l'étoile
• Pseudo-éléments : pour créer l'étoile elle-même

J'espère que vous avez apprécié ce court tutoriel. Je prévois d'en publier un nouveau prochainement avec d'autres drapeaux, expliquant comment fonctionnent les différents dégradés, pas seulement les dégradés linéaires. Gardez-le à l’œil !

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!