# Générateur de clip-path CSS

> Dessine des masques polygonaux avec un aperçu et du CSS copiable.

[Open tool](https://www.toolcabana.com/fr/css-clip-path-maker) · [Design et CSS](https://www.toolcabana.com/fr/category/design-and-css)

Tool ID: css-clip-path-maker. Requested language: fr. Description language: fr. Complete guide translation: yes.

## Overview (en)

CSS clip-path maker turns a list of x,y percentage points into a clip-path: polygon() rule and shows it applied to a gradient box. Enter 3 to 50 points, one pair per line, with each coordinate between 0 and 100. The default four points form a trapezoid, and the generated declaration can be copied straight into a stylesheet.

## Supported tasks (fr)

Dessine des masques polygonaux avec un aperçu et du CSS copiable.

## Steps (fr)

1. Saisissez les valeurs demandées dans le panneau des paramètres.
2. Définissez les points du polygone (% x,y ; une paire par ligne).
3. Lancez le générateur de clip-path CSS, vérifiez le résultat, puis utilisez les commandes de copie ou de téléchargement disponibles.

## Settings

- Points du polygone (% x,y ; une paire par ligne) (fr; key: points; type: textarea)

## Limitations (fr)

Les images respectent la limite existante de 32 mégapixels du canevas. Jusqu'à 100 images sources sont autorisées lorsque c'est pris en charge. Le HTML collé est limité à 200 000 caractères ; les diagrammes Mermaid à 20 000 caractères et 300 lignes. La génération SVG et PNG nécessite un navigateur.

## Privacy and connections (fr)

Cette opération traite sa source dans votre navigateur. La copie et le téléchargement sont des actions explicites ; la saisie source n'est enregistrée ni dans un compte ni dans l'historique.

## Questions (fr)

### How do I make a triangle with CSS clip-path?

Enter three points on separate lines: 50,0 then 100,100 then 0,100. The tool outputs clip-path: polygon(50% 0%, 100% 100%, 0% 100%); which clips the element to an upward-pointing triangle that scales with its size.

### Can I use pixel values in the clip-path maker?

No. Each coordinate is read as a percentage of the element's width or height and must be between 0 and 100; anything else returns an error. Percentages keep the shape proportional when the element resizes.

### Does the clip-path maker support circle() or ellipse()?

No. It only generates polygon() shapes. You can approximate a circle with many points, up to the 50-point limit, or write a circle() value yourself after copying the polygon rule.

### Où ma saisie est-elle traitée ?

Cette opération traite sa source dans votre navigateur. La copie et le téléchargement sont des actions explicites ; la saisie source n'est enregistrée ni dans un compte ni dans l'historique.

### Quelles sont les limites de saisie ?

Les images respectent la limite existante de 32 mégapixels du canevas. Jusqu'à 100 images sources sont autorisées lorsque c'est pris en charge. Le HTML collé est limité à 200 000 caractères ; les diagrammes Mermaid à 20 000 caractères et 300 lignes. La génération SVG et PNG nécessite un navigateur.

## Related tools

- [CSS clamp calculator](https://www.toolcabana.com/fr/css-clamp-calculator)
- [CSS grid layout generator](https://www.toolcabana.com/fr/css-grid-layout-generator)
- [CSS flexbox playground](https://www.toolcabana.com/fr/css-flexbox-playground)
- [CSS cubic Bezier editor](https://www.toolcabana.com/fr/css-cubic-bezier-editor)