jquery.app
Espanol
EnglishDeutschFrancaisEspanol日本語Nederlands

Herramientas CSS

Gratis Generador de funcion CSS shape()

Genere funciones CSS shape() para formas no rectangulares con clip-path y shape-outside.

Cargando herramienta...

Qué es Generador de funcion CSS shape()?

La función CSS shape() es una nueva primitiva de forma que unifica y extiende las funciones de forma heredadas (polygon(), circle(), ellipse(), path(), inset(), rect()). A diferencia de las funciones de forma anteriores, shape() soporta coordenadas porcentuales relativas a las dimensiones del propio elemento, no solo coordenadas en píxeles. También soporta palabras clave de reference box (margin-box, padding-box, content-box, border-box) que definen el sistema de coordenadas, y las formas creadas con shape() pueden interpolarse para transiciones y animaciones CSS suaves entre diferentes tipos de forma.

Respuesta rápida

CSS shape() crea formas no rectangulares para clip-path y shape-outside con coordenadas porcentuales relativas al tamaño del elemento, soporte de reference box y transiciones animables entre tipos polygon, circle, ellipse, path y rect. Chrome 139+, Safari 18.2+ (Baseline 2026). Incluya siempre una función de forma de respaldo para navegadores no compatibles.

Last updated: 2026-06-02

Limitaciones

  • El soporte del navegador se limita a Chrome 139+, Edge 139+ y Safari 18.2+ a mediados de 2026. Firefox no soporta shape() aún, y los navegadores antiguos ignoran toda la declaración. Se requiere una función de forma de respaldo para compatibilidad amplia.
  • shape() polygon requiere unidades explícitas (px o %) en cada valor de coordenada, a diferencia de la función polygon() heredada que acepta números desnudos. Esto hace que la sintaxis sea más verbosa y propensa a errores al migrar desde declaraciones polygon() existentes.
  • No todos los tipos de forma se interpolan limpiamente entre sí. Aunque shape() soporta animación entre tipos, las transiciones entre geometrías muy diferentes (por ejemplo, rect a un path complejo) pueden producir formas intermedias inesperadas. Pruebe las animaciones visualmente antes de implementar.

Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub

Cómo usar esta herramienta

  1. Seleccione el tipo de forma: polygon (lista de pares de coordenadas), circle (centro y radio), ellipse (centro más radio-x y radio-y), path (datos de ruta SVG) o rect (superior, derecha, inferior, izquierda con redondeo opcional).
  2. Elija el reference box: margin-box, padding-box, content-box o border-box. El reference box determina el sistema de coordenadas para coordenadas basadas en porcentaje.
  3. Configure las coordenadas de la forma. Para polígonos, añada pares de puntos de coordenadas. Para círculos y elipses, establezca la posición del centro y los valores de radio. Active el modo amigable para animación para asegurar que los valores de forma usen sintaxis compatible para transiciones CSS.
  4. Copie el CSS shape() generado y aplíquelo a la propiedad clip-path o shape-outside. Añada un respaldo usando las funciones de forma heredadas para navegadores que aún no soportan shape().

Para qué puedes usarla

  • Crear máscaras de imagen no rectangulares para secciones principales y tarjetas de contenido destacado usando clip-path con shape() polygon y coordenadas porcentuales.
  • Hacer que el texto fluya alrededor de imágenes circulares o elípticas usando shape-outside con shape() circle y padding-box reference para espaciado consistente.
  • Animar entre una forma de polígono y un círculo al pasar el ratón o al desplazarse usando transiciones CSS, ya que shape() soporta interpolación entre diferentes tipos de forma.

Casos de uso

Ejemplos prácticos

Ejemplo

Máscara de imagen principal animada

Una página de aterrizaje muestra una imagen principal recortada como polígono al cargar, luego transiciona a un rectángulo completo al desplazarse. Usando shape() polygon con coordenadas porcentuales, el clip-path anima suavemente de una forma hexagonal a un rectángulo completo. Proporcione clip-path: none como respaldo para navegadores sin soporte de shape().

Ejemplo

Flujo de texto alrededor de una foto de perfil circular

Una página de perfil de blog tiene una foto circular alrededor de la cual fluye el texto. Usando shape-outside: shape() circle at 50% 50% con 50% radius y padding-box reference, el texto fluye ajustadamente alrededor de la imagen. El radio basado en porcentaje escala con el tamaño de la imagen para diseños responsive.

Errores comunes

  • Usar coordenadas en píxeles en shape() cuando las coordenadas porcentuales serían más responsive: las coordenadas porcentuales en shape() se adaptan al tamaño del elemento, mientras que las coordenadas en píxeles se rompen al redimensionar. Use valores porcentuales a menos que se requiera alineación exacta en píxeles.
  • Asumir que shape() polygon usa la misma sintaxis de números desnudos separados por comas que polygon(): shape() requiere unidades explícitas (px o %) en cada valor de coordenada, haciendo la sintaxis más verbosa que la función heredada.
  • Aplicar shape() sin un respaldo para navegadores antiguos: shape() es compatible con Chrome 139+, Edge 139+ y Safari 18.2+ pero no con Firefox. Los navegadores no compatibles ignoran toda la declaración. Proporcione siempre una declaración de forma de respaldo antes de la regla shape().

Verificación

  1. En Chrome 139+, aplique el CSS shape() generado a un elemento con clip-path e inspeccione el estilo calculado. Redimensione el viewport para confirmar que las coordenadas porcentuales escalen correctamente en relación al tamaño del elemento.
  2. Añada una transición CSS en clip-path y alterne entre dos valores de shape() (polygon y circle) al pasar el ratón. Verifique que la transición anime suavemente entre las dos formas sin fallos visuales o saltos.

FAQ

Preguntas sobre Generador de funcion CSS shape()

¿En qué se diferencia shape() de polygon(), circle() y las otras funciones de forma heredadas?

shape() es un reemplazo unificado para polygon(), circle(), ellipse(), path(), inset() y rect(). Sus ventajas clave son: coordenadas porcentuales relativas a las dimensiones del propio elemento en lugar del tamaño del reference box, palabras clave de reference box explícitas (margin-box, padding-box, content-box, border-box) y la capacidad de animar entre diferentes tipos de forma. Las funciones heredadas no pueden interpolar entre tipos de forma: no puede transicionar de polygon() a circle() con las funciones antiguas, pero shape() lo soporta.

¿Puedo animar entre un polígono y un círculo usando shape()?

Sí. Con la función polygon() anterior, solo podía animar entre dos polígonos con el mismo número de vértices. Con shape(), puede animar entre dos tipos de forma compatibles siempre que los valores de coordenadas sean compatibles para interpolación. Active el modo amigable para animación en este generador para asegurar que los valores generados usen sintaxis compatible para transiciones CSS suaves entre formas.

¿Qué reference box debería usar para shape-outside versus clip-path?

Para shape-outside, el reference box predeterminado es margin-box, pero padding-box suele ser mejor porque el texto debe ajustarse al área de padding, no extenderse al borde o margen. Para clip-path, el valor predeterminado es border-box, que recorta el elemento incluyendo su borde. Content-box es útil cuando desea recortar solo el área de contenido, excluyendo padding y borde. La elección depende de si la forma debe incluir el espaciado del elemento.

¿Qué navegadores soportan la función CSS shape()?

La función shape() es Baseline 2026, compatible con Chrome 139+, Edge 139+ y Safari 18.2+. Firefox no soporta shape() a partir de la versión 138. Para uso en producción, incluya siempre una declaración de respaldo usando las funciones de forma heredadas (polygon(), circle(), etc.) o clip-path: none antes de la declaración shape(). El respaldo asegura que el estilo funcione en todos los navegadores mientras que la mejora shape() se aplica donde esté disponible.

Herramientas relacionadas

Más herramientas css

Prueba también

Prueba también