shape-outside: nos permite definir la forma que se vea una imagen que se coloca flotando al lado del texto.
Por lo que para poder definir la forma de esa imagen tiene que estar definida con un float, y tendremos que definir sus características de width y height.
Valores
- circle()
- ellipse()
- inset()
- polygon()
- url()
- initial
- inherit
Las medidas que podemos usar para definir estas formas son las que se usan en CSS: %, px, em, rem, vw, vh.
circle: las coordenadas a definir son ( radio at ejeX ejeY).
Ejemplo
See the Pen shape-outside: circle() by Bernardo Martin (@bermartinv) on CodePen.
ellipse: las coordenadas a definir son ( radioX radioY at ejeX ejeY).
Ejemplo
See the Pen shape-content: ellipse() by Bernardo Martin (@bermartinv) on CodePen.
inset: Podremos indicar las siguientes medidas: top right bottom left border-radius. Con esta característica definimos una figura y el texto en su interior.
Ejemplo
See the Pen vzvERo by Bernardo Martin (@bermartinv) on CodePen.
polygon: podemos definir un poligono.
Ejemplo
See the Pen shape-outside: polygon() by Bernardo Martin (@bermartinv) on CodePen.
url: indicaremos la dirección de una imagen.
shape-margin: Tenemos otra característica que nos puede ayudar a definir shape-outside, esta nos ayuda a poner un margen a nuestra shape-outside. Las medidas que podemos usar son las normales que se usan en CSS.
shape-image-threshold: Irá definida por un número entre 1 y 0, usando los números decimales e indicamos como el texto será introducido dentro de la imagen.
Puedes ver en caniuse que navegadores se puede usar, pero practicamente todos se adaptaron a esta característica menos edge y Explorer
