Generador CSS clip-path
Genera reglas CSS con la propiedad clip-path para recortar elementos en formas circulares, elípticas o poligonales.
Ejecutar herramienta
Este generador crea fragmentos de código CSS con la propiedad clip-path para recortar elementos visuales en páginas web. Puedes elegir figuras geométricas como círculos, elipses, triángulos, hexágonos, pentágonos, estrellas o rombos. En el caso del círculo, el generador aplica el porcentaje de tamaño y el punto de anclaje indicados tras la palabra clave at. En la elipse, calcula el radio horizontal con el tamaño introducido y el radio vertical multiplicando ese valor por 0,6, situando la figura en la posición seleccionada. Las opciones poligonales como el triángulo o la estrella emplean coordenadas de porcentaje fijas para garantizar trazos regulares y definidos. Si indicas un nombre no reconocido, el sistema recurre a la plantilla circular por omisión. El resultado muestra directamente la regla CSS lista para copiar en tu hoja de estilos, facilitando el diseño de máscaras sin necesidad de calcular manualmente cada vértice o función.
Instrucciones
- Escribe el nombre de la figura deseada, como circle, ellipse, triangle, hexagon, pentagon, star o diamond.
- Introduce el valor numérico para el porcentaje de tamaño si utilizas figuras circulares o elípticas.
- Indica la posición del centro, como center, top left o coordenadas específicas.
- Ejecuta la herramienta para obtener el bloque CSS con la declaración de recorte lista para usar.
Ejemplos
- Configura la forma como circle con tamaño 40 y posición center para generar clip-path: circle(40% at center);
- Selecciona triangle para obtener un polígono predefinido con la regla clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
Preguntas frecuentes
¿Qué figuras poligonales están disponibles en el generador?
Incluye plantillas fijas para triángulo, hexágono, pentágono, estrella y rombo con coordenadas porcentuales predeterminadas.
¿Cómo influyen el tamaño y la posición en las formas poligonales?
Los campos de tamaño y posición solo modifican las figuras circulares y elípticas. Las figuras poligonales emplean siempre coordenadas fijas.
¿Qué ocurre si se introduce un nombre de figura no reconocido?
Si indicas una figura distinta a las admitidas, la herramienta recurre automáticamente a la plantilla circular predeterminada.