<div class="support-css-shapes"></div>

<div class="wrapper clearfix">
  <div class="shape pentagon"></div>
  <blockquote><p>In geometry, a pentagon is any five-sided polygon or 5-gon. The sum of the internal angles in a simple pentagon is 540°. A pentagon may be simple or self-intersecting. A self-intersecting regular pentagon (or star pentagon) is called a pentagram.</p><cite><a href="https://en.wikipedia.org/wiki/Pentagon"></a>Wikipedia</cite></blockquote>
</div>

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}

/**
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */
.clearfix {
    *zoom: 1;
}

body {
  font-family: "Helvetica Neue", Helvetica, arial, freesans, clean, sans-serif;
  color: #66595c;
  background-color: #faf6ec;
}

/* Start the styles  */
p {
  line-height: 1.68;
}
.wrapper {
  width: 100%;
  max-width: 930px;
  margin: 30px auto 0;
}
.shape {
    float: left;
    background-size: contain;
    background-repeat: no-repeat;
    margin: 30px;
    width: 265px;
    height: 265px;
    shape-margin: 20px;
}
.pentagon {
    background-image: url('https://lourfield.github.io/advanced-css-shapes/img/pentagon.svg');
    shape-outside: polygon(32px 126px, 163px 32px, 293px 127px, 244px 282px, 82px 281px);
}
p {
  margin-left: 0;
  font-size: 1.2em;
  line-height: 1.48;
  color: #7a6120;
  font-family: "Lucida Bright", Georgia, serif;
  font-style: italic;
}
cite {
    color: #b79030;
    font-weight: bold;
}