<div class="wrapper">

<h1>Simple shape</h1>

<div class="box">
  <img class="balloon" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/12005/round-balloon.png">
  <p>Praesent ut fermentum enim, ultricies luctus risus. Nullam auctor, turpis id gravida luctus, justo tellus euismod nulla, condimentum commodo sem purus vel arcu. Sed in arcu arcu. Fusce eget lobortis ligula. Sed mattis efficitur magna quis ultricies. Nunc tristique mattis ex sit amet dictum. Maecenas non viverra mauris.</p>
  
  <p>Phasellus auctor nec magna sit amet volutpat. Nulla lobortis massa nunc, id pellentesque nisl ultrices quis. Ut volutpat, orci ac egestas ullamcorper, arcu urna fringilla mauris, vitae efficitur turpis nulla vel est. Morbi semper sapien vitae massa scelerisque consectetur. Fusce eget diam tellus. Etiam lacinia, lacus non varius congue, erat leo aliquam mi, sit amet accumsan nunc sapien quis nisl. Donec dignissim iaculis quam, ac consectetur augue feugiat nec. In velit ligula, iaculis fringilla ex a, luctus hendrerit libero.</p>
  
  <p>Etiam lacinia, lacus non varius congue, erat leo aliquam mi, sit amet accumsan nunc sapien quis nisl. Donec dignissim iaculis quam, ac consectetur augue feugiat nec. In velit ligula, iaculis fringilla ex a, luctus hendrerit libero.</p>
  

</div>


  .balloon {
    float: left;
    width: 429px;
    shape-outside: circle(50%);
  }


body {
  background-color: #fff;
  color: #333;
  font: 20px Helvetica, Arial, sans-serif;
}

.wrapper {
  margin: 0 auto;
  max-width: 640px;
}


* {
  box-sizing: border-box;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.