Les formes CSS expliquées: Comment dessiner un cercle, un triangle et plus en utilisant du CSS pur

Avant de commencer. Si vous voulez plus de contenu gratuit mais au format vidéo. Ne manquez pas ma chaîne Youtube où je publie des vidéos hebdomadaires sur le codage FrontEnd.

//www.youtube.com/user/Weibenfalk

----------

Êtes-vous nouveau dans le développement Web et le CSS? Vous êtes-vous déjà demandé comment sont fabriquées ces jolies formes que vous voyez partout sur Internet? Ne me demande plus. Vous êtes arrivé au bon endroit.

Ci-dessous, je vais expliquer les bases de la création de formes avec CSS. Il y a beaucoup à vous dire sur ce sujet! Par conséquent, je ne couvrirai pas tous (loin de tous) les outils et les formes, mais cela devrait vous donner une idée de base de la façon dont les formes sont créées avec CSS.

Certaines formes nécessitent plus de «correctifs et astuces» que d'autres. La création de formes avec CSS est généralement une combinaison de l'utilisation de la largeur, de la hauteur, du haut, de la droite, de la gauche, de la bordure, du bas, de la transformation et de pseudo-éléments comme : avant et : après. Nous avons également des propriétés CSS plus modernes pour créer des formes avec comme shape-outside et clip-path. J'écrirai à leur sujet ci-dessous également.

Formes CSS - La méthode de base

En utilisant quelques trucs en CSS , nous avons toujours été en mesure de créer des formes de base comme des carrés , des cercles , et des triangles avec des propriétés CSS régulières. Regardons quelques-uns d'entre eux maintenant.

Carrés et rectangles

Les carrés et les rectangles sont probablement les formes les plus faciles à réaliser. Par défaut, un div est toujours un carré ou un rectangle.

Vous définissez la largeur et la hauteur comme indiqué dans le code ci-dessous. Ensuite, il suffit de donner à l'élément une couleur d'arrière-plan. Vous pouvez avoir toutes les autres propriétés souhaitées sur l'élément.

#square { background: lightblue; width: 100px; height: 100px; }

Cercles

Il est presque aussi facile de créer un cercle. Pour créer un cercle, nous pouvons définir le rayon de la bordure sur l'élément. Cela créera des coins courbes sur l'élément.

Si nous le réglons à 50%, cela créera un cercle. Si vous définissez une largeur et une hauteur différentes, nous obtiendrons un ovale à la place.

#circle { background: lightblue; border-radius: 50%; width: 100px; height: 100px; }

Triangles

Les triangles sont un peu plus compliqués. Nous devons définir les frontières sur l'élément pour correspondre à un triangle. En définissant la largeur et la hauteur sur zéro sur l'élément, la largeur réelle de l'élément sera la largeur de la bordure.

Gardez à l'esprit que les bords de la bordure d'un élément ont une diagonale de 45 degrés l'un par rapport à l'autre. C'est pourquoi cette méthode fonctionne pour créer un triangle. En définissant l'une des bordures sur une couleur unie et les autres bordures sur transparent, elle prendra la forme d'un triangle.

#triangle { width: 0; height: 0; border-left: 40px solid transparent; border-right: 40px solid transparent; border-bottom: 80px solid lightblue; }

Si vous voulez avoir un triangle / flèche pointant dans une autre direction Vous pouvez changer les valeurs de bordure correspondant à quel côté vous voulez être visible. Ou vous pouvez faire pivoter l'élément avec la propriété transform si vous voulez vraiment être sophistiqué.

 #triangle { width: 0; height: 0; border-top: 40px solid transparent; border-right: 80px solid lightblue; border-bottom: 40px solid transparent; }

Très bien - c'est une introduction aux formes de base avec CSS. Il existe probablement une quantité infinie de formes auxquelles vous pouvez penser pour créer. Ce ne sont que les principes de base, mais avec un peu de créativité et de détermination, vous pouvez accomplir beaucoup avec juste des propriétés CSS de base.

Dans certains cas, avec des formes plus avancées, il est également judicieux d'utiliser les pseudo sélecteurs: after et: before. Ceci est hors de portée de cet article car mon intention est de couvrir les bases pour vous permettre de démarrer.

Désavantage

Il y a un gros inconvénient avec l'approche ci-dessus. Par exemple, si vous voulez que votre texte circule et enveloppe votre forme. Un div HTML standard avec un arrière-plan et des bordures pour constituer la forme ne le permettra pas. Le texte ne s'adaptera pas et ne coulera pas autour de votre forme. Au lieu de cela, il circulera autour du div lui-même (qui est un carré ou un rectangle).

Vous trouverez ci-dessous une illustration montrant le triangle et la façon dont le texte se déroulera.

Heureusement, nous avons quelques propriétés CSS modernes à utiliser à la place.

Formes CSS - L'autre façon

De nos jours, nous avons une propriété appelée shape-outside à utiliser dans CSS. Cette propriété vous permet de définir une forme autour de laquelle le texte sera enveloppé / déroulé.

Parallèlement à cette propriété, nous avons quelques formes de base:

encart ()

cercle()

ellipse()

polygone()

Voici un conseil : vous pouvez également utiliser la propriété clip-path . Vous pouvez créer votre forme avec cela de la même manière, mais cela ne laissera pas le texte s'enrouler autour de votre forme comme le fait la forme extérieure.

L'élément auquel nous allons appliquer la forme avec la propriété shape-outside doit être flotté. Il doit également avoir une largeur et une hauteur définies. C'est vraiment important à savoir!

Vous pouvez en savoir plus sur les raisons ici. Vous trouverez ci-dessous également un texte que j'ai extrait du lien fourni vers developer.mozilla.org.

La shape-outsidepropriété est spécifiée à l'aide des valeurs de la liste ci-dessous, qui définissent la zone flottante pour les éléments flottants. La zone flottante détermine la forme autour de laquelle le contenu en ligne (éléments flottants) s'enroule.

encart ()

Le type inset () peut être utilisé pour créer un rectangle / carré avec un décalage facultatif pour le texte d'habillage. Il vous permet de fournir des valeurs sur la façon dont vous souhaitez que votre texte d'habillage chevauche la forme.

Vous pouvez spécifier le décalage pour qu'il soit le même pour les quatre directions comme ceci: insert (20px). Ou il peut être défini individuellement pour chaque direction: encart (20px 5px 30px 10px) .

Vous pouvez également utiliser d'autres unités pour définir le décalage, par exemple le pourcentage. Les valeurs correspondent comme ceci: inset (en haut à droite en bas à gauche) .

Check out the below code example. I've specified the inset values to be 20px at the top, 5px to the right, 30px at the bottom and 10px to the left. If you want your text to go around your square instead you can just skip using inset() at all. Instead set the background on your div and specify the size as usual.

 #square { float: left; width: 100px; height: 100px; shape-outside: inset(20px 5px 30px 10px); background: lightblue; }

It is also possible to give inset() a second value that specifies the border-radius of the inset. Like below:

 #square { float: left; width: 100px; height: 100px; shape-outside: inset(20px 5px 30px 10px round 50px); background: lightblue; }

circle()

In this one a circle is created using the shape-outside property. You also have to apply a clip-path with the corresponding property for the circle to show up.

The clip-path property can take the same value as the shape-outside property so we can give it the standard circle() shape that we used for shape-outside. Also, note that I've applied a 20px margin on the element here to give the text some space.

#circle { float: left; width: 300px; height: 300px; margin: 20px; shape-outside: circle(); clip-path: circle(); background: lightblue; }

In the above example, I don't specify the radius of the circle. This is because I want it to be as big as the div is (300px). If you want to specify a different size for the circle you can do that.

The circle() takes two values. The first value is the radius and the second value is the position. These values will specify the center of the circle.

In the below example I've set the radius to 50%. Then I have shifted the center of the circle by 30%. Note that the word "at" has to be used between the radius and position values.

I've also specified another position value on the clip-path. This will clip the circle in half as I move the position to zero.

 #circle { float: left; width: 150px; height: 150px; margin: 20px; shape-outside: circle(50% at 30%); clip-path: circle(50% at 0%); background: lightblue; }

ellipse()

Ellipses work the same way as circles except that they create an oval. You can define both the X value and the Y value, like this: ellipse(25px  50px).

The same as a circle, it also takes a position value as the last value.

 #ellipse { float: left; width: 150px; height: 150px; margin: 20px; shape-outside: ellipse(20% 50%); clip-path: ellipse(20% 50%); background: lightblue; }

polygon()

A polygon is a shape with different vertices/coordinates defined. Below I create a "T" shape which is the first letter in my name. I start from the coordinates 0,0 and move from left to right to create the "T" shape.

#polygon { float: left; width: 150px; height: 150px; margin: 0 20px; shape-outside: polygon( 0 0, 100% 0, 100% 20%, 60% 20%, 60% 100%, 40% 100%, 40% 20%, 0 20% ); clip-path: polygon( 0 0, 100% 0, 100% 20%, 60% 20%, 60% 100%, 40% 100%, 40% 20%, 0 20% ); background: lightblue; }

Images

You can also use images with transparent backgrounds to create your shape. Like this round beautiful moon below.

This is a .png image with a transparent background.

#moon { float: left; width: 150px; height: 150px; shape-outside: url("./src/moon.png"); }

And that's it! Thank you for reading.

About the author of this article

My name is Thomas Weibenfalk and I'm a developer from Sweden. I regularly create free tutorials on my Youtube channel. There's also a few premium courses out there on React and Gatsby. Feel free to visit me on these links:

Twitter — @weibenfalk,

Weibenfalk on Youtube,

Weibenfalk Courses Website.