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 !

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".