shape-outside
Si queremos poner un icono o una imagen al lado de un texto como si fuera un carácter puede resultar bastante complejo sobre todo el adaptarlo. Para ello, tenemos una serie de propiedades que nos facilitan que una imagen se adapte a un texto como si estuviéramos trabajando con un editor de textos.
La propiedad shape-outside nos sirve para indicarle al navegador que ignore la parte transparente de una imagen y que así se adapte el texto a la imagen. Los valores que puede tomar esta propiedad es shape-outside(none| [<shape-box>] | [<shape-box>] | [<basic-shape>]). Aquí tenemos algunos ejemplos de cómo podemos usarlo con las formas básicas.
Junto a esta propiedad, tenemos shape-margin que nos permite darle un margen a la imagen que por ejemplo hemos usado con la propiedad shape-outside. Este margen va a tener en cuenta la forma de la imagen, de tal forma que si tenía alguna forma “especial” el margen se le de teniendo en cuenta su forma. La sintaxis de esta propiedad es shape-margin( <length> | )
Por último, dentro de este bloque nos encontramos con la propiedad shape-image-threshold, que nos permite indicar el umbral de transparencia (canal alfa) que debe tener cada píxel para considerarse transparente y crear la forma. Esto es muy útil para cuando no nos detecta la transparencia de una imagen. La sintaxis que tiene esta propiedad es: shape-image-threshold(<alpha-value>).
propiedad clip-path
Antiguamente teníamos la propiedad (hoy en día obsoleta) clip para hacer recortes, hoy en día ha sido reemplazada por clip-path que nos permite recortar y ocultar la parte que no queremos. La sintaxis que se emplea es: clip-path(none | <basic-shape> | ). Cuando hablamos de clip-source, estamos haciendo referencia a una url que referencia a un elemento SVG. Encontramos un ejemplo usando clip-path aquí.