<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;
}
This Pen doesn't use any external JavaScript resources.