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

<div class="container clearfix">
  <div class="shape"></div>
    <p><strong>Parrots</strong>, also known as psittacines are birds of the roughly 393 species in 92 genera that make up the order Psittaciformes, found in most tropical and subtropical regions. The order is subdivided into three superfamilies: the Psittacoidea
      ("true" parrots), the Cacatuoidea (cockatoos), and the Strigopoidea (New Zealand parrots). Parrots have a generally pantropical distribution with several species inhabiting temperate regions in the Southern Hemisphere, as well. The greatest diversity
      of parrots is in South America and Australasia.</p>
.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  */

blockquote {
  font-family: "Lucida Bright", Georgia, serif;
  font-style: italic;
blockquote {
  padding-top: 40px;
blockquote p {
  line-height: 1.6;
  color: #000;
  text-shadow: 1px 1px 5px rgba(255, 255, 255, 0.32);

.container {
  width: 600px;
  height: 900px;
  margin: 30px auto;
  background-image: url('https://lourfield.github.io/advanced-css-shapes/img/parrot.jpg');
  background-repeat: no-repeat;

.shape {
  width: 600px;
  height: 900px;
  float: left;
  shape-image-threshold: 0.5;
  shape-outside: url('https://lourfield.github.io/advanced-css-shapes/img/parrot-shape.png');
  shape-margin: 15px;

External CSS

  1. https://codepen.io/tutsplus/pen/XjVpGo.css

External JavaScript

This Pen doesn't use any external JavaScript resources.