Bords et formes
border-radius, blobs et clip-path
Éditeur
Faites glisser les huit poignées le long des bords, ou saisissez les valeurs. Chaque coin a un rayon horizontal et un rayon vertical.
Modèles
Morphing
Code
border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
À propos de l'outil
Cet éditeur produit deux familles de formes CSS. L'onglet border-radius règle les huit rayons d'une boîte, un horizontal et un vertical par coin, pour obtenir des coins arrondis, une goutte, une feuille ou un blob organique. Vous déplacez huit poignées sur les bords, saisissez les valeurs en pourcentage ou collez une valeur existante. Une option anime la boîte entre une forme de départ et une forme d'arrivée.
L'onglet clip-path découpe un élément selon un polygone, un cercle, une ellipse ou un rectangle inset aux coins arrondis. Le polygone accepte de 3 à 40 sommets, que l'on déplace à la souris ou au clavier, avec onze modèles comme l'étoile, la flèche ou la bulle de message. L'aperçu s'affiche sur une couleur ou sur une image de votre choix, et le CSS se copie en un clic.
Comment l'utiliser
- Choisissez l'onglet « border-radius » ou « clip-path ».
- Pour un border-radius, partez d'un des « Modèles » ou cliquez sur « Blob aléatoire », puis ajustez les poignées ou les « Rayons horizontaux » et « Rayons verticaux ».
- Pour un clip-path, choisissez le « Type de forme », puis déplacez les « Sommets » ou réglez les curseurs.
- Cochez au besoin « Animer entre deux formes » et réglez la « Durée d'un cycle ».
- Cliquez sur « Copier le CSS » et collez le code dans votre feuille de style.
Questions fréquentes
Que signifie la syntaxe border-radius avec une barre oblique ?
Les quatre valeurs avant la barre sont les rayons horizontaux des coins, dans l'ordre haut gauche, haut droit, bas droit, bas gauche ; les quatre suivantes sont les rayons verticaux. Des valeurs différentes donnent des coins elliptiques, à la base des formes de blob.
Quel code produit l'animation entre deux formes ?
Un bloc @keyframes morph qui passe de la forme de départ à la forme d'arrivée puis revient, une règle animation en boucle infinie avec la durée choisie de 1 à 30 secondes, et une media query prefers-reduced-motion qui coupe l'animation pour les personnes qui limitent les mouvements.
Comment ajouter ou retirer un sommet de polygone ?
Cliquez sur un côté du polygone pour ajouter un sommet à cet endroit, ou utilisez « Ajouter un sommet ». Au clavier, Tab sélectionne un sommet, les flèches le déplacent (Maj pour aller plus vite) et Suppr le retire. Un polygone garde au moins 3 sommets.
L'image d'aperçu est-elle envoyée quelque part ?
Non. L'image choisie pour l'aperçu du clip-path est affichée depuis une adresse locale créée par votre navigateur. Elle n'est ni envoyée ni mémorisée, et elle n'apparaît pas dans le CSS généré, qui contient uniquement la propriété clip-path.