Cómo se usa
- Escriba un Nombre de la clase para la regla, como triangle, y elija una Forma.
- Para un polígono, arrastre un punto en la Vista previa o escriba su x e y en los campos. Use Añadir punto y Quitar el último punto para cambiar el número.
- Para inset, circle o ellipse, escriba los números en los campos. La vista previa se redibuja al momento.
- Copie la regla de CSS en su hoja de estilos y ponga la clase en el elemento que quiere recortar.
Las cuatro formas
El módulo CSS Shapes (en inglés) define las formas básicas que acepta clip-path. Un polígono es una lista de puntos, cada uno con un par de posiciones, y los puntos se unen en el orden en que los escribe. Un desplazamiento (inset) recorta la caja a cuatro distancias, dadas como superior, derecha, inferior e izquierda. Un círculo o una elipse tienen un radio, o dos, y un centro escrito después de la palabra at.
- polygon(50% 0%, 100% 100%, 0% 100%) tiene tres puntos, cada uno con una x y una y en porcentaje.
- inset(10% 20% 10% 20%) recorta el 10 % por arriba y por abajo, y el 20 % por la izquierda y por la derecha.
- circle(60px at 50% 50%) es un círculo de radio 60 px, con su centro en el medio de la caja.
Porcentajes y caja de referencia
Un porcentaje en un punto, en un desplazamiento o en un centro es una parte de la caja, y la especificación lo resuelve según el tamaño usado de la caja de referencia. El módulo CSS Masking (en inglés) dice que, cuando no se da una caja de referencia, se usa la caja del borde. Las partes del elemento fuera de la forma no se dibujan.
Lo que la herramienta no escribe
- Una regla de relleno para un polígono, la cláusula round de un desplazamiento y las formas url() o path() de clip-path.
- Un radio en porcentaje para un círculo o una elipse. El texto de formas que usó esta herramienta no dice cómo se resuelve, así que los radios van en px.
Ejemplo resuelto: un triángulo
Un triángulo es un polígono con tres puntos: el centro superior, la esquina inferior derecha y la esquina inferior izquierda de la caja. La tabla da cada punto, y la regla que escribe la herramienta es .triangle con clip-path igual a polygon(50% 0%, 100% 100%, 0% 100%).
| Punto | x | y |
|---|---|---|
| 1 | 50% | 0% |
| 2 | 100% | 100% |
| 3 | 0% | 100% |
Preguntas frecuentes
¿Por qué los radios de un círculo o una elipse van en píxeles?
La especificación de formas no dice cómo se resuelve un radio en porcentaje para circle() y ellipse(), así que la herramienta ofrece solo píxeles. Un radio en píxeles tiene un único significado, y la vista previa lo dibuja con el tamaño que tiene la caja en su pantalla.
¿Por qué desaparece la forma cuando escribo un valor incorrecto?
La herramienta muestra el motivo en rojo y no dibuja ninguna forma, para no darle nunca una regla incorrecta. Un valor fuera de su intervalo, o unos desplazamientos que no dejan ninguna parte de la caja, son las causas más habituales.
¿Importa el orden de los puntos?
Sí. Los puntos se escriben en el orden en que los lista, y ese orden dibuja el contorno. Mover un punto cambia la forma sin cambiar los demás.
¿En qué se diferencia clip-path de border-radius?
clip-path recorta el elemento a una forma, así que la parte exterior no se dibuja, mientras que border-radius solo redondea las esquinas. La caja de referencia de clip-path es la caja del borde, salvo que se indique otra.
¿Cuántos puntos puede tener un polígono aquí?
De 3 a 20. Más puntos dan un contorno más fino, pero una regla más larga, y la vista previa trabaja con hasta 20 puntos de control.
¿Se envía a alguna parte el CSS que genero?
No. La vista previa y la regla se hacen en su navegador. Nada se guarda ni se envía a nuestro servidor, así que copie el CSS antes de salir de la página.
Fuentes
- W3C (en inglés): CSS Shapes Module Level 1, formas básicas
- W3C (en inglés): CSS Masking Module Level 1, la propiedad clip-path
Cifras y texto revisados por última vez el jueves, 12 de noviembre de 2026.