La Cascade

Un peu de tout sur CSS, HTML, SVG et JS,traduit du web anglophone
Rechercher

Créer des formes en CSS

par Chris Coyier, 14 janvier 2023, css, pseudo-elements, article original paru le 1er octobre 2018 dans CSS-Tricks

Un étonnant catalogue de formes, des plus simples aux plus complexes, créées en CSS par Chris Coyier & C°.


CSS nous permet de créer toutes sortes de formes. Les carrés et les rectangles sont faciles, car ce sont les formes naturelles du Web. Ajoutez une largeur et une hauteur et vous obtenez la taille exacte du rectangle dont vous avez besoin. Ajoutez un rayon de bordure et vous pouvez arrondir cette forme, et avec le rayon approprié, vous pouvez transformer ces rectangles en cercles et en ovales.

Nous disposons également des pseudo-éléments ::before et ::after en CSS, qui nous offrent le potentiel de deux formes supplémentaires que nous pouvons ajouter à l'élément original. En faisant preuve d'ingéniosité avec le positionnement, la transformation et bien d'autres autres astuces, nous pouvons créer de nombreuses formes en CSS avec un seul élément HTML.

De nos jours, notre meilleur atout pour dessiner des formes est soit le SVG, soit l'utilisation d'un clip-path en CSS, qui fonctionne un peu comme SVG (et peut faire référence au SVG). Par exemple, regardez ces jeux d'icônes SVG, cet éditeur de clip-path, et cette introduction au clipping CSS. Cet article a été écrit à l'origine avant que l'une ou l'autre de ces technologies ne s'impose vraiment !

Carré

Rectangle

Cercle

Ovale

Triangle vers le haut

Triangle vers le bas

Triangle vers la gauche

Triangle vers la droite

Triangle rectangle en haut à gauche

 

Triangle rectangle en haut à droite

 

Triangle rectangle en bas à gauche

 

Triangle rectangle en bas à droite

Flèche courbe via Ando Razafimandimby

 

Trapezoïde

Parallèlogramme

Étoile (6 points)

Étoile (5 points) Shape via Kit MacAllister

 

Pentagone

 

Hexagone via Aaron Hanson

 

Octogone

 

Cœur via Nicolas Gallagher

 

Infini via Nicolas Gallagher

 

Carreau via Joseph Silber

 

Diamant via Joseph Silber

 

Carreau resserré via Joseph Silber

Diamant taillé via Alexander Futekov

 

Œuf

 

Pac-Man

 

Bulle

RSS Feed via Kevin Huff

 

Explosion 12 Points via Alan Johnson

 

Explosion 8 Points via Alan Johnson

 

Yin Yang via Alexander Futekov

 

Ruban de badge via Catalin Rosu

 

Space Invader Shape via Vlad Zinculescu

 

Écran télé

Chevron via Anthony Ticknor

 

Loupe

 

Icone Facebookvia Nathan Swartz

 

Croissant de Lune via Omid Rasouli

 

Drapeau via Zoe Rooney

Cône via Omid Rasouli

 

Croix via Kaya Basharan

Enveloppe via Josh Rodgers

Pointeur (via Amsakanna / alt)

Cadenas

Coins (via Zberno)

NdT: et pour terminer, vous pouvez voir aussi ces diapos de Sara Soueidan qui recommande SVG plutôt que CSS. Pour clip-path, vous pouvez consulter ici Comprendre clip-path. Pour SVG, les articles ne manquent pas dans la Cascade, en particulier la série des "Bases de SVG".

Voir la liste des articles de Chris Coyier traduits dans La Cascade.
Article original paru le 1er octobre 2018 dans CSS-Tricks
Traduit avec l'aimable autorisation de CSS-Tricks et de Chris Coyier.
Copyright CSS-Tricks © 2018-2022