Cuando pensamos en dibujar con CSS, muchas veces empezamos por lo más conocido: círculos con border-radius, triángulos hechos con bordes, pseudo-elementos y combinaciones de capas. Todo eso sigue siendo útil. De hecho, si todavía no has trabajado esa base, te conviene empezar por formas básicas con CSS y luego ir subiendo de nivel con recursos más flexibles.
Pero llega un momento en el que quieres salir de la caja, literalmente. Quieres construir una tarjeta con una esquina imposible, una etiqueta con más carácter, una silueta más orgánica o un detalle decorativo que no parezca otro rectángulo disfrazado. Ahí es donde clip-path en CSS se vuelve especialmente interesante.
Esta propiedad permite recortar visualmente un elemento para que deje de mostrarse como una caja rectangular tradicional. Gracias a eso, puedes crear formas más expresivas sin depender siempre de imágenes externas o SVG para todo.
Lo interesante no es solo la técnica. Lo interesante es lo que cambia en tu forma de pensar el diseño. Con clip-path, dejas de limitarte a decorar cajas y empiezas a trabajar con siluetas. Y eso, cuando te interesa el dibujo con hojas de estilo, abre muchas posibilidades.
En este artículo vamos a ver qué es clip-path, cómo funciona, cuándo conviene usarlo, qué errores evitar y cómo integrarlo en composiciones más originales.
Qué es clip-path en CSS y por qué importa tanto
De la caja rectangular al recorte personalizado
Por defecto, la web piensa en cajas. Un div, una imagen, una tarjeta o un botón nacen con forma rectangular. Puedes redondearlos, decorarlos o añadirles sombras, sí, pero siguen partiendo de esa lógica.
Con clip-path en CSS, ese elemento puede mostrar solo una parte concreta de su superficie. Todo lo que queda fuera del área de recorte deja de verse. El bloque sigue existiendo, pero visualmente adopta otra forma.
Y ahí está la clave: ya no estás simplemente estilando una caja, sino recortando una forma.
Eso hace que clip-path sea muy útil cuando buscas más expresividad visual, menos rigidez formal, detalles decorativos sin imágenes y composiciones CSS con más personalidad. Si quieres consultar la definición técnica de la propiedad, la documentación de MDN sobre clip-path es una de las referencias más claras y fiables.
Por qué es tan útil para dibujar con CSS
Si te gusta dibujar con CSS, tarde o temprano te das cuenta de que muchas soluciones acaban pareciéndose entre sí. Cambias colores, cambias bordes, cambias proporciones… pero la estructura visual sigue siendo casi siempre la misma.
clip-path rompe esa inercia porque te obliga a pensar cada elemento como una masa que puedes esculpir.
Ese cambio mental importa mucho. Ya no te preguntas solo qué etiqueta necesitas, sino qué forma quieres conseguir. Y esa forma de trabajar encaja muy bien con una manera más madura de construir ilustraciones y componentes visuales con CSS.
No es lo mismo que shape-outside
Este matiz conviene dejarlo claro. clip-path recorta lo que se ve, pero no hace que el texto fluya alrededor de la forma visible.
Es decir, si quieres que una imagen parezca un hexágono, clip-path te sirve. Si lo que quieres es que el texto rodee una silueta concreta en una maquetación más editorial, estás hablando de otra cosa. Puedes ver esa diferencia en la guía de CSS Shapes de MDN.
Esa diferencia parece pequeña, pero evita muchos malentendidos.
Cómo funciona clip-path: sintaxis, lógica y primeros pasos
Las funciones más habituales
clip-path admite varios valores, pero si estás empezando hay tres que te interesa tener claras:
circle()inset()polygon()
Las dos primeras van muy bien para formas simples o ajustes rápidos. Pero la que realmente te abre la puerta a formas más libres es polygon().
Un ejemplo muy simple para entender la idea
Un rombo básico puede resolverse así:
.rombo {
width: 180px;
aspect-ratio: 1;
background: linear-gradient(135deg, #cc2b5e, #753a88);
clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}Aquí no estás añadiendo una forma encima. Estás recortando directamente el propio elemento.
Y aunque sea un ejemplo sencillo, muestra muy bien el cambio de lógica que introduce esta propiedad.
polygon() y la lógica de los puntos
Con polygon(), defines una serie de coordenadas. Cada par representa un vértice. El navegador une esos puntos y genera la forma visible.
Dicho de otra manera: empiezas a trabajar casi como si dibujaras un contorno punto por punto. Si quieres profundizar en esta función, te recomiendo echar un vistazo a la documentación de polygon() en MDN.
Por ejemplo, una tarjeta con una esquina recortada podría hacerse así:
.card-recortada {
width: 320px;
min-height: 220px;
padding: 2rem;
background: #ffffff;
clip-path: polygon(0 0, 88% 0, 100% 14%, 100% 100%, 0 100%);
box-shadow: 0 12px 30px rgb(0 0 0 / 0.08);
}La estructura HTML no cambia. Pero el resultado visual sí.
Cómo pensar las coordenadas sin volverte loca
Empieza con porcentajes
Si estás empezando, lo más práctico es trabajar con porcentajes en lugar de píxeles. Te permiten construir formas más flexibles y más fáciles de adaptar a distintos tamaños.
Además, te ayudan a que la forma escale mejor en responsive.
Empieza con figuras simples
Antes de lanzarte a una estrella complicada o a una forma orgánica, merece la pena practicar con siluetas sencillas como:
- rombos
- trapecios
- hexágonos
- flechas
- esquinas cortadas
Ese tipo de práctica te obliga a entender el recorrido del contorno, que es justo lo que necesitas dominar.
Piensa la forma como un recorrido
Uno de los errores más comunes al usar polygon() es colocar puntos sin una lógica clara. Lo ideal es recorrer mentalmente la figura en una dirección coherente, por ejemplo en el sentido de las agujas del reloj.
Cuando haces eso, el resultado es mucho más fácil de prever y de corregir.
Usa solo los puntos que necesites
Añadir más vértices no siempre mejora una figura. A veces solo hace que sea más difícil de mantener.
Una buena norma es esta: usa el menor número de puntos que te permita expresar bien la forma.
Cómo usar clip-path para crear dibujos más originales
No te quedes solo en recortar imágenes
Muchas personas asocian clip-path únicamente con recortes diagonales o imágenes con forma rara. Y sí, sirve para eso. Pero su potencial real va bastante más allá.
Puedes usarlo para construir:
- etiquetas
- cintas
- hojas
- estrellas
- pétalos
- marcos
- bocadillos
- fondos geométricos
- composiciones decorativas
Es ahí donde empieza de verdad el dibujar con CSS con más libertad.
Un ejemplo simple: una etiqueta decorativa
.etiqueta {
display: inline-block;
padding: 0.9rem 1.4rem;
background: #f8e0ea;
color: #020101;
font-weight: 700;
clip-path: polygon(0 0, 92% 0, 100% 50%, 92% 100%, 0 100%, 6% 50%);
}Este ejemplo demuestra algo importante: una forma no tiene que ser compleja para resultar más original.
A veces basta con un pequeño cambio en la silueta para que un elemento gane personalidad visual.
La clave está en trabajar por capas
clip-path funciona especialmente bien cuando lo combinas con otros recursos como pseudo-elementos, degradados, sombras, rotaciones o superposición de capas.
De hecho, si quieres llevar esta lógica un poco más lejos, encaja muy bien combinarlo con el artículo Pseudo-elementos en CSS: la clave para crear ilustraciones más complejas, porque ambos recursos se complementan muy bien.
Un ejemplo con una hoja
.hoja {
position: relative;
width: 180px;
height: 240px;
background: linear-gradient(180deg, #7fd36b, #2f9e44);
clip-path: polygon(50% 0%, 78% 8%, 96% 30%, 100% 56%, 86% 82%, 60% 98%, 40% 98%, 14% 82%, 0% 56%, 4% 30%, 22% 8%);
}
.hoja::before {
content: "";
position: absolute;
top: 8%;
bottom: 8%;
left: 49%;
width: 2px;
background: rgb(255 255 255 / 0.45);
}
.hoja::after {
content: "";
position: absolute;
inset: 0;
background:
linear-gradient(35deg, transparent 48%, rgb(255 255 255 / 0.18) 49%, rgb(255 255 255 / 0.18) 51%, transparent 52%);
}Aquí clip-path define la silueta principal. Luego los pseudo-elementos añaden detalle y riqueza visual.
Esa es una forma muy buena de pensar este tipo de ilustraciones: primero construyes la forma base y luego la enriqueces.
Cuándo usar polygon() y cuándo valorar otras opciones
polygon() suele ser el mejor punto de partida
Para la mayoría de formas simples o medias, polygon() suele ser más que suficiente. Tiene una sintaxis razonablemente clara y te permite iterar rápido.
Además, es cómoda para experimentar directamente en el navegador.
path() puede servir, pero no siempre compensa
Cuando necesitas formas mucho más complejas, path() puede parecer una solución atractiva. El problema es que suele resultar más incómoda de editar y mantener.
En proyectos reales, esto importa bastante. Una forma impresionante pero difícil de retocar puede convertirse en un problema.
Por eso conviene tener criterio: si una forma se vuelve demasiado compleja para CSS, quizá SVG sea una mejor decisión. No pasa nada. Elegir otra herramienta también forma parte de diseñar bien.
Si te interesa seguir esa línea sin depender de SVG para todo, también puedes complementar este tema con el post Dibujar iconos sencillos con CSS sin usar SVG ni imágenes.
Errores habituales al usar clip-path en CSS
Pensar que recorta el layout
Este es uno de los errores más comunes. clip-path cambia la parte visible del elemento, pero no reorganiza por sí solo la maquetación que lo rodea.
Visualmente ves una forma distinta. Estructuralmente, el bloque sigue estando ahí.
Usarlo solo porque “queda moderno”
No toda tarjeta necesita una diagonal. No toda etiqueta necesita una silueta extraña. No todo diseño mejora por tener más recortes.
Cuando clip-path aporta jerarquía, identidad o intención visual, suma. Cuando se usa por puro efecto, puede generar ruido.
Y aquí conecta muy bien con una idea importante de experiencia de usuario: diseñar primero lo esencial suele dar mejores resultados que añadir recursos visuales sin una función clara.
Complicar demasiado la forma
Cuantos más puntos uses, más difícil será editar esa figura en el futuro. Si una forma te obliga a pelearte demasiado con el código para mantenerla, conviene replantearla.
Olvidarte de la claridad visual
Esto es especialmente importante en interfaces. Una silueta original no debería entorpecer la lectura, confundir la jerarquía o hacer que el componente parezca menos usable.
La creatividad funciona mejor cuando no pone en riesgo la claridad. De hecho, cualquier decisión formal debería apoyar la usabilidad web, no competir con ella.
Animaciones y microinteracciones con clip-path
Un recurso interesante para hover
Otra ventaja de clip-path es que puede usarse en interacciones. Eso permite crear hovers más originales que un simple cambio de color o de sombra.
Por ejemplo:
.boton-dinamico {
padding: 1rem 1.5rem;
border: 0;
background: #cc2b5e;
color: white;
clip-path: polygon(0 0, 92% 0, 100% 50%, 92% 100%, 0 100%, 6% 50%);
transition: clip-path 0.3s ease;
}
.boton-dinamico:hover {
clip-path: polygon(0 0, 100% 0, 94% 50%, 100% 100%, 0 100%, 6% 50%);
}No hace falta exagerar el efecto. Un pequeño cambio de forma ya puede hacer que un componente se sienta más vivo.
Cuándo merece la pena animarlo
Tiene sentido animar clip-path cuando la transformación acompaña al comportamiento del elemento. Por ejemplo:
- una tarjeta que se abre
- una etiqueta que se expande
- un bloque que revela contenido
- una pieza ilustrada que cambia sutilmente al interactuar
Lo que no suele funcionar tan bien es usarlo en todo. Como cualquier recurso potente, gana valor cuando se usa con medida.
Cómo integrarlo mejor en proyectos reales
Empieza por detalles pequeños
No necesitas rediseñar toda una interfaz alrededor de clip-path. Muchas veces basta con introducirlo en:
- una etiqueta
- un bloque destacado
- una card concreta
- una imagen decorativa
- un separador visual
Eso te permite probar su lenguaje sin sobrecargar el conjunto.
Combínalo con otras técnicas de dibujo CSS
Si te interesa seguir explorando esta línea, este tema conecta muy bien con contenidos como Cómo dibujar formas básicas con CSS: círculos, triángulos, óvalos y estrellas, Pseudo-elementos en CSS: la clave para crear ilustraciones más complejas y Dibujar iconos sencillos con CSS sin usar SVG ni imágenes.
Entre los tres enfoques puedes construir una serie muy sólida sobre dibujar con CSS desde distintos ángulos.
Piensa siempre en mantenimiento
Una forma muy llamativa pero difícil de editar no suele ser una gran decisión a largo plazo. Si vas a reutilizar un componente, procura que el código sea claro y que la forma no dependa de una complejidad innecesaria.
Si quieres profundizar todavía más en compatibilidad y evolución de la plataforma, también puede resultarte útil seguir la documentación y novedades de web.dev, especialmente cuando aparecen nuevas capacidades relacionadas con formas y clipping en CSS.
Preguntas frecuentes sobre clip-path en CSS
¿clip-path sirve para dibujar sin usar imágenes?
Sí. Puedes utilizarlo para construir formas visuales a partir de bloques, colores, degradados y capas CSS. Aun así, para figuras muy complejas, SVG puede seguir siendo una opción más cómoda.
¿Cuál es la mejor función para empezar?
La más útil para empezar suele ser polygon(), porque permite crear muchas formas distintas y te ayuda a entender la lógica del contorno por puntos.
¿Se puede animar clip-path?
Sí. Puede usarse en hover, transiciones y animaciones. Lo importante es plantear bien los estados para que el cambio de forma resulte fluido y tenga sentido visual.
Recortar formas con intención
Aprender clip-path en CSS no consiste solo en añadir efectos visuales curiosos. En realidad, implica cambiar la forma de mirar los elementos de la interfaz.
Cuando empiezas a usar esta propiedad con criterio, dejas de pensar únicamente en cajas decoradas y empiezas a pensar en formas con intención. Descubres que un recorte puede aportar identidad, ritmo, dirección y personalidad sin necesidad de depender siempre de imágenes o recursos externos.
Ahí está su verdadero valor.
Pero también conviene recordar algo importante: no toda forma original mejora un diseño. A veces suma. A veces distrae. La diferencia está en el criterio con el que se usa.
Por eso, si te interesa dibujar con CSS o enriquecer tus interfaces con un lenguaje visual más expresivo, clip-path merece la pena. No porque sea una moda ni porque “quede moderno”, sino porque puede ayudarte a construir piezas más memorables dentro del propio CSS.
