<div class="container">
  <h1>Austria</h1>
  <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/123941/css-shapes-8.jpg" class="austria" />
  <p>o you notice, as we rise over Venice, what a number of bridges and canals there are? It is a wonder- ful city, and we are very sorry to leave it; but we have to hurry on, as mamma is anxious to see us home again.</p>
  <p>We are going to sail to Trieste, the great a seaport of Austria, and as we move through the air, I will tell you about the country, if you make yourselves cosy in the carpet.</p>
  <p>Austria, or, to speak more accurately, the Austro-Hungarian Empire, is about 800 miles long, and 500 miles broad. In area it is 250,000 square miles in size, three-fourths of it being mountainous. The frontier line is 4000 miles.</p>
  <p>It is bounded on the North by Prussia and Russia ; by Turkey, the Adriatic, and Italy, Switzerland, and Norway on the West. It is divided into seventeen divisions, called Crown Lands (Krönlander), and a military frontier.</p>
  <p>These, again, are divided into two grand sections : the Cisleithan countries, or Austria ; the Transleithan, or Hungary.</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=Gilda+Display|Dancing+Script);

body {
  font-family: 'Gilda Display', serif;
}
h1 {
  font-family: 'Dancing Script', cursive;
  font-size: 100px;
  font-weight: normal;
  padding-top: 10px;
  text-align: center;
}
.container {
  max-width: 500px;
}
.austria {
  float: left;
  shape-outside: polygon(88% 0, 90% 15%, 83% 22%, 93% 31%, 100% 36%, 72% 73%, 35% 75%, 19% 100%, 0 100%, 0 0);
  shape-margin: 10px;
}