CSS shape-outside

La propiedad shape-outside en CSS permite que el texto fluya alrededor de formas no rectangulares como círculos, elipses o polígonos, ideal para diseños creativos.

Usar forma circular

Con circle() se puede dar forma circular a un elemento flotante, haciendo que el texto lo rodee. Se suele usar junto a clip-path.

Este ejemplo muestra cómo el texto fluye alrededor de una imagen circular.

Usar forma poligonal

Con polygon() se definen formas personalizadas con coordenadas, permitiendo flujos de texto únicos.

En este ejemplo el texto rodea un polígono definido con polygon().

Consejos para usar shape-outside

Algunos consejos para aprovechar shape-outside:

• Usa clip-path junto a shape-outside para alinear forma visual y flujo de texto.
• Shape-outside requiere float, así que el elemento debe ser flotante.
• Experimenta con círculos, elipses y polígonos para layouts variados.