circular image text around it?
by lemon kazi
HTML
<div class="wrap">
<div class="circle">
<img src="http://lorempixel.com/image_output/city-q-c-200-200-2.jpg" alt="" />
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, voluptatem numquam earum sapiente quaerat cumque voluptates optio atque, possimus eum rerum. Quasi, quos incidunt ratione aliquam, sapiente veniam obcaecati praesentium vitae, officia
nemo eum? Ipsum molestias odio dicta aliquid facere earum aliquam reprehenderit consequuntur illum distinctio, quisquam amet in eveniet. Possimus, numquam. Cum hic, expedita possimus! Saepe eaque suscipit facere laudantium mollitia culpa corporis
distinctio pariatur! Beatae, aspernatur impedit voluptas accusantium aliquid assumenda. Nostrum inventore laborum repudiandae iste quos officia necessitatibus impedit adipisci aut blanditiis illum dolor debitis accusantium voluptas enim optio, assumenda
quod tenetur natus architecto suscipit consequuntur, dolorem. Error neque, aliquam illum nam sed odit adipisci, et incidunt, modi nihil quibusdam alias ipsum doloribus commodi exercitationem architecto repellendus tempora voluptates? Quaerat quidem
sapiente doloremque culpa earum, maiores cupiditate quos sint, odit nisi, iste qui ut suscipit eligendi! Neque aliquam labore maiores! Soluta, nam enim, tempore adipisci excepturi eos quos. Ad voluptates totam sed nemo ratione dolorem eligendi obcaecati
doloribus debitis, soluta consectetur iure, maiores cupiditate voluptate aliquam laboriosam ipsa deserunt sunt odit rerum molestiae aliquid expedita? Quod animi libero cumque voluptas corporis repellat, laudantium dolores provident doloremque laborum.
Modi expedita minus, autem laborum quia reiciendis animi, ullam voluptates quaerat sunt nesciunt, magnam impedit doloremque dicta. Illo velit sint eius, repellat provident. Nemo officiis amet officia sed placeat inventore iusto aspernatur aliquid
magnam! Ipsam numquam, eveniet laboriosam nostrum, quaerat, deserunt rem...
CSS
.wrap {
margin: 1em auto;
}
.circle {
border-radius: 50%;
float: left;
shape-outside: circle(50%);
width: 200px;
height: 200px;
margin: 1em;
}
.circle img {
display: block;
border-radius: 50%;
}