CSS Clip-path Builder
Click on the canvas to add points.
Drag handles to move.
Right-click a handle to remove.
Understand CSS Clip-path Builder
Construye formas CSS de clip-path — polygon, circle, ellipse e inset — de forma visual, y devuelve la propiedad lista para pegar.
How it works
clip-path define una región y todo lo que queda fuera de ella no se pinta. `polygon()` toma una lista de puntos `x% y%` medidos desde la esquina superior izquierda de la caja del elemento, así que `polygon(50% 0, 100% 100%, 0 100%)` es un triángulo; `circle()` y `ellipse()` toman radios más una posición `at`; `inset()` toma los recortes superior, derecho, inferior e izquierdo con un radio `round` opcional. Los porcentajes se resuelven contra la propia caja del elemento en cada eje de forma independiente, lo que significa que la forma se estira con el elemento en lugar de conservar sus proporciones.
When to use it
- Cortar un borde diagonal o inclinado en un separador de secciones sin exportar una imagen
- Enmascarar una imagen o un vídeo dentro de un marco no rectangular con CSS puro
- Construir una flecha, un galón, una insignia o una cinta que de otro modo requerirían una imagen de fondo
- Crear una animación de aparición haciendo una transición entre dos polígonos
Watch out for
- Recortar no cambia la maquetación. El elemento sigue ocupando toda su caja, así que los vecinos no se desplazan al hueco que ha recortado: añada un margen negativo o ajuste el espaciado usted mismo.
- Los porcentajes son por eje, así que la forma se deforma cuando el elemento cambia de tamaño. Una diagonal de 45° a un ancho no lo es a otro; use píxeles o unidades de viewport cuando el ángulo tenga que mantenerse.
- Las transiciones entre polígonos solo se interpolan cuando ambos tienen el mismo número de puntos en el mismo orden. Añada puntos repetidos para rellenar la forma más corta en lugar de esperar que el navegador los empareje.
- Un clip-path recorta todo lo que pinta el elemento, incluidas su box-shadow, su outline y su anillo de foco. Un botón recortado puede perder por completo su indicador visible de foco, lo que es una regresión de accesibilidad.
Frequently Asked Questions
¿Qué formas puede crear clip-path?
Cuatro funciones de forma: polygon() para figuras de n lados arbitrarias (arrastrando los puntos de control), circle() para círculos perfectos con centro y radio, ellipse() para óvalos e inset() para recortes rectangulares con esquinas opcionalmente redondeadas mediante border-radius.
¿Cómo creo un separador de secciones en diagonal con clip-path?
Use polygon() sobre el contenedor de la sección: polygon(0 0, 100% 0, 100% 90%, 0 100%). Eso recorta en diagonal la esquina inferior derecha y crea un borde inferior inclinado. Ajuste los porcentajes para cambiar el ángulo y la dirección de la diagonal.
¿clip-path afecta al flujo de la maquetación?
No: clip-path solo afecta a lo que se ve al renderizar. El elemento sigue ocupando todas sus dimensiones originales en la maquetación, lo que puede provocar zonas sensibles invisibles o huecos sobrantes. Añada overflow: hidden al elemento padre si el espaciado se ve mal.
How to Use CSS Clip-path Builder
- Paste or type your input in the input area above.
- The tool processes your input automatically or click Run.
- Copy or download the result using the action buttons.
- Use Ctrl+Enter to run quickly from the keyboard.