Cómo generar un fragmento CSS clip-path para recortar formas

Selecciona una forma reconocida, configura tamaño y posición cuando corresponda y genera el fragmento CSS con clip-path. Si dejas las entradas vacías, se aplican circle, 50 y center.

Qué prepara el generador

Este generador prepara un fragmento CSS que contiene una declaración clip-path para enmascarar un elemento y definir la zona que queda visible. Puede servirte al crear tarjetas, imágenes, avatares o bloques con una silueta geométrica sin redactar manualmente la declaración.

La configuración se organiza alrededor de tres entradas: forma, tamaño y posición. Las formas con plantilla propia son circle, ellipse, triangle, hexagon, pentagon, star y diamond. La forma es opcional y, cuando se deja vacía, se utiliza circle. El tamaño también puede omitirse; en ese caso parte de 50. La posición admite el valor predeterminado center cuando no se proporciona otra.

Antes de generar el CSS, decide si necesitas una figura circular o elíptica ajustable, o una silueta poligonal basada en una plantilla. Esta distinción te ayuda a interpretar el resultado: círculos y elipses incorporan el tamaño y la posición indicados, mientras que las formas poligonales conservan las coordenadas porcentuales de su plantilla.

Configuración y generación del fragmento

1. Abre el generador y localiza los controles destinados a la forma, el tamaño y la posición. Identifica cada uno por su función, sin depender de una etiqueta localizada concreta.
2. Escribe uno de los nombres reconocidos: circle, ellipse, triangle, hexagon, pentagon, star o diamond. Para conservar la configuración inicial, deja vacía la entrada de forma y se aplicará circle.
3. Introduce el tamaño que quieras probar si has elegido circle o ellipse. Cuando el campo queda vacío, el valor utilizado es 50; no hace falta rellenarlo para generar el fragmento.
4. Indica una posición, como center o top left, si quieres situar el recorte en un punto concreto. Si no escribes nada, se emplea center.
5. Genera el resultado y busca el fragmento CSS que incluye la declaración clip-path. Copia esa declaración, no solo el nombre de la forma ni los valores introducidos.
6. Añade la declaración a la regla CSS del elemento que quieras enmascarar y revisa la silueta obtenida. Si necesitas otro aspecto, vuelve a cambiar la entrada pertinente y genera un fragmento nuevo.

En circle, el tamaño suministrado se incorpora como porcentaje y la posición aparece después de at. En ellipse, el primer porcentaje conserva el tamaño indicado, mientras que el segundo se obtiene al multiplicarlo por 0.6; ambos se colocan en la posición proporcionada. Así, un tamaño de 40 da lugar a un primer valor del 40 % y a un segundo valor del 24 % en esa plantilla.

Las opciones triangle, hexagon, pentagon, star y diamond se construyen mediante plantillas polygon con coordenadas porcentuales fijas. Selecciona una de ellas, genera el resultado y valora la silueta que producen sus puntos; no esperes que cambiar el tamaño o la posición reescriba esas coordenadas.

Lectura del resultado y sus límites

Interpreta el resultado como una declaración para aplicar una máscara al elemento elegido. El fragmento no es una imagen independiente: describe una geometría CSS que debes incorporar a la regla del elemento que quieres recortar.

Si la forma resultante es circular, comprueba el porcentaje y la posición incluidos en la declaración. En una elipse, compara sus dos porcentajes teniendo presente que el segundo procede del factor 0.6, por lo que la medida vertical de la plantilla queda calculada a partir del tamaño introducido.

Una figura poligonal se reconoce por su construcción con polygon y por sus coordenadas porcentuales fijas. En esas plantillas, modificar tamaño o posición no cambia los puntos definidos; para obtener otra silueta, selecciona otra forma reconocida.

También conviene revisar la entrada de forma cuando el resultado no coincide con lo esperado. Un nombre que no pertenece al conjunto reconocido no crea una geometría nueva, sino que utiliza la geometría circular. Separa la comprobación en tres partes: el nombre solicitado, los valores aportados y el elemento cuya regla CSS recibe la declaración.

Ejemplo práctico

Quieres aplicar una máscara circular a una tarjeta, con un tamaño del 40 % y ubicada en la esquina superior izquierda.

Selecciona circle, escribe 40 como tamaño, introduce top left como posición y genera el fragmento.

El resultado contiene una declaración clip-path circular con el porcentaje 40% y la posición top left, situada después de at.

Limitaciones

• Las plantillas disponibles se limitan a las formas reconocidas: los círculos y las elipses calculan sus medidas según la entrada, mientras que las figuras poligonales usan coordenadas fijas y un nombre no reconocido recurre a la geometría circular.

Errores frecuentes

• Causa: introducir una traducción o una variante que no coincide con un nombre reconocido. Corrección: escribe circle, ellipse, triangle, hexagon, pentagon, star o diamond; un valor no reconocido utiliza la geometría circular.

Preguntas frecuentes

¿Cómo se configura un círculo con tamaño y posición?

Al elegir circle, el valor de tamaño se expresa como porcentaje y la posición se coloca después de at; si omites ambos campos, se usan 50 y center.

¿Cómo se obtiene la proporción de una elipse?

Con ellipse, el primer porcentaje toma el tamaño introducido y el segundo corresponde a ese tamaño multiplicado por 0.6, mientras los dos se sitúan en la posición indicada.

¿El tamaño modifica los puntos de una forma poligonal?

triangle, hexagon, pentagon, star y diamond se basan en plantillas polygon con coordenadas porcentuales fijas, de modo que esos controles no alteran sus puntos.