# Creador CSS de clip-path

> Dibuja máscaras de polígono con vista previa y CSS copiable.

[Open tool](https://www.toolcabana.com/es/css-clip-path-maker) · [Diseño y CSS](https://www.toolcabana.com/es/category/design-and-css)

Tool ID: css-clip-path-maker. Requested language: es. Description language: es. 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 (es)

Dibuja máscaras de polígono con vista previa y CSS copiable.

## Steps (es)

1. Introduce los valores solicitados en el panel de ajustes.
2. Configura los puntos del polígono (% x,y; un par por línea).
3. Ejecuta el creador CSS de clip-path, revisa la salida y usa los controles disponibles para copiar o descargar.

## Settings

- Puntos del polígono (% x,y; un par por línea) (es; key: points; type: textarea)

## Limitations (es)

Las imágenes usan el límite de lienzo existente de 32 megapíxeles. Se permiten hasta 100 imágenes de origen donde sea admitido. El HTML pegado está limitado a 200,000 caracteres; los diagramas Mermaid a 20,000 caracteres y 300 líneas. La generación de SVG y PNG requiere un navegador.

## Privacy and connections (es)

Esta operación procesa su fuente en tu navegador. Copiar y descargar son acciones explícitas; la entrada de origen no se guarda en una cuenta ni en un historial.

## Questions (es)

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

### ¿Dónde se procesa mi entrada?

Esta operación procesa su fuente en tu navegador. Copiar y descargar son acciones explícitas; la entrada de origen no se guarda en una cuenta ni en un historial.

### ¿Cuáles son los límites de entrada?

Las imágenes usan el límite de lienzo existente de 32 megapíxeles. Se permiten hasta 100 imágenes de origen donde sea admitido. El HTML pegado está limitado a 200,000 caracteres; los diagramas Mermaid a 20,000 caracteres y 300 líneas. La generación de SVG y PNG requiere un navegador.

## Related tools

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