Generador de Formas CSS clip-path

Cómo funciona

Escriba el color de relleno en el panel izquierdo — HEX, RGB y HSL se reconocen — y luego toque o haga clic en una forma de la lista; el código y la vista previa se renuevan con cada cambio. El hexágono, por ejemplo, produce polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%): seis puntos de esquina expresados como porcentaje de la caja. Como las coordenadas son porcentajes, el mismo código dibuja la misma forma en una insignia de 40 píxeles y en un anuncio de 400; la línea aspect-ratio: 1 / 1 mantiene la caja cuadrada, y sin ella la forma se estira con la caja. Copie el código en su propio selector; la línea background es solo un relleno de demostración — para recortar su propia imagen, bórrela y ponga la línea clip-path directamente en la etiqueta img. El botón Descargar guarda la vista previa como PNG de 1200×800 píxeles.

Esta herramienta también se busca como generador clip path css, clip path polygon, formas con css, hexagono en css, estrella en css, clip path circulo.

¿Qué es clip-path?

clip-path es la propiedad CSS que decide qué región de un elemento se pinta: el interior del trazado que usted define queda visible y todo lo exterior se vuelve completamente transparente. El trazado se escribe de cuatro maneras — polygon() con una lista de esquinas, circle() y ellipse() con curvas, inset() con un rectángulo metido hacia adentro. El recorte afecta solo al dibujo; la posición, el tamaño y el contenido del elemento no cambian. Cortar esquinas de fotos, armar insignias y cintas, y enmarcar imágenes en formas geométricas son sus trabajos más comunes — todo con una línea de CSS y sin editar la imagen.

¿Qué es Coordenadas de polygon()?

polygon() es la notación de clip-path que define una forma por sus esquinas: cada punto es un par de "distancia desde la izquierda, distancia desde arriba" separado por comas. Los valores se escriben casi siempre en porcentaje, porque el porcentaje escala con la caja — el mismo código de estrella sirve en un ícono pequeño y en un anuncio de ancho completo; con píxeles la forma queda de tamaño fijo y, cuando la caja crece, arrinconada en una esquina. Los puntos se conectan uno tras otro; en el orden equivocado los bordes se cruzan y la forma se parte en fragmentos inesperados.

¿Cuál es la diferencia entre clip-path y overflow: hidden?

overflow: hidden solo recorta en rectángulo: el contenido que se desborda de la caja se oculta, pero la silueta de la caja nunca pasa de un rectángulo con esquinas redondeadas. clip-path corta la caja por el trazado geométrico que usted defina — estrella, hexágono, flecha, polígono libre — y lo hace dando forma al elemento mismo, no escondiendo un desborde. Responden preguntas distintas: para "oculta lo que se sale", overflow basta y cuesta menos; para "este elemento no debe ser un rectángulo", clip-path es el único camino. También se combinan: overflow por fuera para controlar el desplazamiento, clip-path por dentro para la forma.

La trampa del recorte: el área invisible sigue ocupando lugar

clip-path solo recorta el pintado, no encoge la caja: un elemento recortado en triángulo sigue ocupando su rectángulo completo en el diseño de la página, y los elementos vecinos no se acercan a las esquinas que parecen vacías. El área de clic, en cambio, sigue la forma recortada en la mayoría de los navegadores — un clic en la esquina invisible no hace nada; ese es el comportamiento definido de la propiedad, no un error.

La segunda sorpresa frecuente es la sombra: box-shadow se dibuja alrededor del rectángulo de la caja y el recorte también la corta, así que una forma recortada no muestra sombra debajo. Si necesita una, use filter: drop-shadow() en lugar de box-shadow; drop-shadow sigue la forma pintada y proyecta la sombra por el borde real de la estrella.

Cómo leer los porcentajes y remodelar el resultado

Cada par dentro de polygon() es una esquina: el primer número es la distancia desde la izquierda, el segundo desde arriba, y 0% y 100% son los bordes de la caja. Los puntos se unen con líneas en el orden escrito y el último se cierra con el primero. Tome el código generado como punto de partida: junte las esquinas superiores del trapecio y se acerca al triángulo, sepárelas y se acerca al rectángulo.

La animación entre dos formas también pasa por estas coordenadas: transition: clip-path funde dos valores polygon() suavemente solo cuando el número de puntos coincide. Por eso el octágono y el marco de esquinas biseladas de esta herramienta (8 puntos cada uno) se transforman limpiamente entre sí, mientras que el paso de hexágono a estrella salta sin animación.

Preguntas frecuentes

¿Puedo poner una foto dentro de la forma recortada?

Sí — ese es el trabajo principal de clip-path: el código se aplica a cualquier elemento, y en una etiqueta img se recorta la foto misma con la forma. La línea background del código generado es solo un relleno de demostración; en su imagen, bórrela y mueva la línea clip-path al elemento de la imagen. Lleve también la línea aspect-ratio, o la forma se deformará con las proporciones de la imagen.

¿Por qué el círculo y la elipse no usan polygon()?

Un borde curvo solo puede aproximarse con puntos de esquina; harían falta decenas y el borde igual quedaría facetado. clip-path tiene notaciones propias para eso: circle(50% at 50% 50%) define por centro y radio, ellipse(50% 35% at 50% 50%) por dos radios. Ambas son curvas matemáticas y se mantienen lisas a cualquier tamaño; esta herramienta elige sola la notación correcta para esas dos formas.

¿Qué pasa en navegadores que no reconocen clip-path?

Un navegador muy antiguo que no conoce clip-path simplemente lo ignora: el elemento se muestra sin recortar, como rectángulo completo — no se pierde contenido, solo la forma decorativa. Las versiones actuales de Chrome, Firefox, Safari y Edge admiten polygon, circle y ellipse sin prefijo; solo versiones de Safari sin actualizar desde hace años siguen pidiendo -webkit-clip-path.

¿Puedo dibujar un borde (border) por la orilla de la forma?

No directamente: border pertenece al rectángulo de la caja, y el recorte lo corta junto con todo lo demás; solo quedan los fragmentos que caen dentro de la forma. La salida habitual son dos capas: dé al elemento exterior la forma y el color del borde, y anide un segundo elemento con el mismo clip-path reducido unos puntos porcentuales; la franja que queda entre ambos se ve como borde.