Alinear el texto alrededor de una imagen de forma circular

La propiedad shape-outside define como se ajusta el texto alrededor de un elemento flotante con dimensiones claramente definidas (alto y ancho).

img#circulo  {
  width: 150px; /*ancho de la imagen*/
  height: 150px; /*alto de la imagen*/
  float: left;
  shape-outside: circle(50%);
  margin-right:10px;
}

Como implementarlo:

<img id="circulo"  src="https://bit.ly/2b64Ibb" />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et efficitur tellus, a gravida est. </p> 
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et efficitur tellus, a gravida est. </p> 
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et efficitur tellus, a gravida est. </p> 
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et efficitur tellus, a gravida est. </p> 
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et efficitur tellus, a gravida est. </p> 

Si deseas más información sobre como desarrollar en

CSS en español

, visita Mozilla Developer Network haciendo clic aquí.

Si necesitas consultoría sobre

CSS

envíame un correo a hola@dannydshore.com o haciendo clic aquí.

#conceptos #wordpress #woocommerce #shortcodes #css