Wrapping text around images using CSS

A simple example of “CSS Shapes” (i.e. the shape-outside property) in action with some text.

HTML Snippet

<div class="quote">   <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/62105/icecream.png" alt="icecream" class="icecream" />   <blockquote class="text">Have you ever spent days and days and days making up flavors of ice cream that no one's ever eaten before? Like chicken and telephone ice cream? Green mouse ice cream was the worst. I didn't like that at all.</blockquote>   <cite class="citation">- From The Sandman by Neil Gaiman</cite> </div>

CSS Code

@charset "UTF-8"; @import url("https://fonts.googleapis.com/css?family=Amatic+SC:400"); html, body {   height: 100%; }  body {   background-color: #ffdce8;   color: #5d0020;   font-family: "Amatic SC", cursive;   overflow: hidden; }  .quote {   height: 400px;   overflow: hidden;   position: absolute;   left: 50%;   margin-left: -350px;   bottom: 0;   width: 700px; }  .icecream {   float: left;   shape-outside: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/62105/icecream.png);   height: 100%; }  .text {   font-size: 42px;   margin: 0;   padding-left: 20px;   padding-top: 20px; } .text::before, .text::after {   font-size: 80px;   position: absolute; } .text::before {   content: "â";   margin-top: -15px;   margin-left: -25px; } .text::after {   content: "â";   margin-top: -10px;   margin-left: -5px; }  .citation {   font-size: 32px;   top: 20px;   position: relative; }