<div class="container">
  <h1>Windsor Castle</h1>
  <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/123941/css-shapes-10.jpg" class="windsor-margin" />
  <p>What a beautiful morning it is! How nice it is to get up fresh!</p>
  <p>I am now going to take you down to Oxford, to show you one of the prettiest sights of England.</p>
  <p>What a bustle there is at the station! Off we go, puff, puff, puff. Look out there; that is Windsor Castle, where the Queen of ten stays. It is such a splendid place! Do you see the great flag flying? That is to tell us that the Queen is there. Her name is Victoria; and her eldest son, who may one day be king, is named Albert Edward.</p>
  <p>See the river Thames winding about; this tells us we are getting near to our journey's end.</p>
</div><!-- container -->

<p class="p">Demo by Patrick Catanzariti. <a href="http://www.sitepoint.com/css-shapes-bre…angular-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=Montez);

body {
  background-color: #2d753e;
  color: #fff;
.container {
  max-width: 600px;
h1 {
  color: #fff;
  font-family: 'Montez', cursive;
  text-align: center;
.windsor-margin {
  border-radius: 150px;
  float: left;
  margin: 5px;
  shape-outside: margin-box;
  max-width: 400px;
  width: 70%;

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.