Criador CSS de clip-path
Desenhe máscaras de polígono com prévia e CSS copiável.
Como usar Criador CSS de clip-path
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.
- Digite os valores solicitados no painel de configurações.
- Configure os pontos do polígono (% x,y; um par por linha).
- Execute o criador CSS de clip-path, revise a saída e use os controles disponíveis para copiar ou baixar.
O que esta ferramenta suporta
Desenhe máscaras de polígono com prévia e CSS copiável.
- Pontos do polígono (% x,y; um par por linha)
- Set this value for your task.
Limites e processamento
As imagens usam o limite existente de 32 megapixels. São permitidas até 100 imagens de origem onde houver suporte. O HTML colado é limitado a 200,000 caracteres; diagramas Mermaid a 20,000 caracteres e 300 linhas. A geração de SVG e PNG exige um navegador.
Perguntas frequentes
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.
Onde minha entrada é processada?
Esta operação processa sua fonte no seu navegador. Copiar e baixar são ações explícitas; a entrada de origem não é salva em conta nem em histórico.
Quais são os limites de entrada?
As imagens usam o limite existente de 32 megapixels. São permitidas até 100 imagens de origem onde houver suporte. O HTML colado é limitado a 200,000 caracteres; diagramas Mermaid a 20,000 caracteres e 300 linhas. A geração de SVG e PNG exige um navegador.