<div class="container">
  <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/123941/css-shapes-5.jpg" class="florence" />
  <p>Driving through some narrow streets, we are now in the Piazza del Duomo. Yonder is the Cathedral. You may well be astonished, Jack. Like so many other churches in Florence, the Cathedral has nothing at the west end but a bare wall, that looks very ugly. When the Florentines had decorated the interior, and had finished the other parts of their buildings, money evidently ran short, and the churches were too often left unfinished. It looks very curious, however, does it not? The dome, covered with white marble, is very fine. Inside, while rather bare compared with other Italian churches, its large size and vast height make it very striking.</p>
</div><!-- container -->

<p class="p">Demo by Patrick Catanzariti. <a href="css-shapes-breaking-rectangular-design">See article</a>.</p>
@import "https://s3-us-west-2.amazonaws.com/s.cdpn.io/123941/typeplate.css";
@import url(https://fonts.googleapis.com/css?family=Monsieur+La+Doulaise);

body {
  background-color: #fcffb0;
h1 {
  font-family: 'Monsieur La Doulaise', cursive;
  font-size: 100px;
  font-weight: normal;
  padding-top: 10px;
  text-align: center;
.container {
  max-width: 400px;
.florence {
  float: left;
  shape-outside: circle(farthest-side at left);
  max-width: 200px;
  width: 50%;

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.