clip-path avec polygon() et circle()
Découpez des éléments en formes personnalisées, polygonales ou circulaires, avec la propriété clip-path.
clip-path avec polygon() et circle() est une leçon CSS Academy gratuite sur CoddyKit. Ceci est la leçon 1 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage CSS Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours CSS Academy comprend 4 leçons au total.
Qu’est-ce que clip-path ?
clip-path découpe la zone visible d’un élément selon une forme indiquée. Tout ce qui se trouve à l’extérieur de cette forme est invisible, mais occupe toujours de l’espace dans la mise en page.
clip-path: circle()
Découpez un élément selon une forme circulaire. L’argument correspond au rayon :
<div class="avatar"></div>
<div class="badge"></div>
clip-path: ellipse()
Découpez un élément selon une ellipse en indiquant le rayon horizontal, le rayon vertical et, éventuellement, la position du centre :
<div class="card-image"></div>
clip-path: polygon()
Il s’agit de la fonction clip-path la plus puissante. Définissez un polygone en indiquant des paires de coordonnées x,y :
<div class="hexagon"></div>
<div class="diagonal-cut"></div>
clip-path: inset()
Découpez un élément selon un rectangle, avec des angles éventuellement arrondis. Les arguments correspondent aux distances de retrait :
<div class="card"></div>
clip-path pour créer des formes de section
Créez des transitions obliques entre les sections d’une page :
<div class="section-diagonal">Diagonal Section</div>
Animer clip-path
Avec le même nombre de points, clip-path peut être interpolé pour créer des animations de révélation et de transformation :
<div class="reveal visible"></div>
clip-path et border-radius
Pour les formes simples aux angles arrondis, border-radius est préférable : cette propriété fonctionne avec l’arrière-plan et la bordure. Utilisez clip-path lorsque vous avez besoin de formes non rectangulaires que border-radius ne permet pas d’obtenir.
clip-path: path()
path() accepte une chaîne de chemin SVG pour créer des formes quelconques :
<div class="star"></div>
Considérations de performances
clip-path crée un nouveau contexte d’empilement et peut déclencher un rendu à chaque image lorsqu’il est animé. Animer clip-path coûte plus cher que la transformation ou l’opacité : combinez ces techniques avec précaution.
Boîte de référence de clip-path
Le système de coordonnées de clip-path correspond à la boîte de bordure de l’élément (ou à sa boîte de marge pour SVG). Les pourcentages sont relatifs aux dimensions de l’élément.
Vérification rapide
Quelle fonction clip-path crée une forme irrégulière et non rectangulaire définie par des paires de coordonnées ?
Récapitulatif
clip-path découpe les éléments selon des formes géométriques. circle() et ellipse() créent des découpes arrondies. polygon() définit toute forme comportant plusieurs sommets. inset() découpe un rectangle avec un arrondi facultatif. Animez des formes polygonales ayant le même nombre de points pour créer des révélations spectaculaires. Utilisez path() pour des formes quelconques fondées sur SVG.
Questions Fréquemment Posées
La leçon « clip-path avec polygon() et circle() » est-elle gratuite ?
Oui — le texte complet de « clip-path avec polygon() et circle() » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours CSS Academy, passe à CoddyKit PRO. Le cours CSS Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « clip-path avec polygon() et circle() » ?
Découpez des éléments en formes personnalisées, polygonales ou circulaires, avec la propriété clip-path. Tu pratiques CSS Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer CSS Academy ?
Aucune expérience préalable n'est requise. CSS Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 1 sur 4.
Combien de temps prend la leçon « clip-path avec polygon() et circle() » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon CSS Academy ?
Oui. Chaque leçon CSS Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- clip-path avec polygon() et circle()
- shape-outside pour l’habillage du texte
- Animation des formes clip-path
- Masques CSS ou clip-path