<header class="header">
  <div class="header__title">
    <h1>
      <code>polygon()</code>
    </h1>
  </div>
  <div class="header__reference">
    <ul class="reference-list">
      <li><a class="reference-list__link" href="https://developer.mozilla.org/en-US/docs/Web/CSS/basic-shape">MDN reference</a></li>
      <li><a class="reference-list__link" href="https://caniuse.com/#feat=css-clip-path">caniuse Support</a></li>
    </ul>
  </div>
</header>

<main>
  <div class="example">
    <p>
      In this example, <code>polygon()</code> is being used in the <code>shape-outside</code> property to "trace" around the illustration of the sleeping red panda. This allows text to flow around it. Try commenting out the <code>shape-outside</code> property in this Pen's CSS to see how the text wrapping changes, or using <a href="https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Edit_CSS_shapes">Firefox's Shape Path Editor</a> tool to edit the polygon shape.
    </p>

    <div class="example__demo example__demo--inset">
      <h2>Red Panda</h2>
      <p class="pronounciation">red pan·​da <a href="https://en.m.wikipedia.org/wiki/Red_panda">From Wikipedia</a></p>

      <p>
        The red panda (<i>Ailurus fulgens</i>) is a mammal native to the eastern Himalayas and southwestern China.
      </p>
      <img
        role="img"
        alt="A cartoon red panda sleeping on a log."
        class="red-panda"
        src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/11907/redpanda.svg">
      <p>
        The red panda has reddish-brown fur, a long, shaggy tail, and a waddling gait due to its shorter front legs; it is roughly the size of a domestic cat, though with a longer body and somewhat heavier. It is arboreal, feeds mainly on bamboo, but also eats eggs, birds, and insects. It is a solitary animal, mainly active from dusk to dawn, and is largely sedentary during the day. It is also called the <b>lesser panda</b>, the <b>red bear-cat</b>, and the <b>red cat-bear</b>.
      </p>
      <p>
        The red panda is the only living species of the genus Ailurus and the family <i>Ailuridae</i>. It has been previously placed in the raccoon and bear families, but the results of phylogenetic analysis provide strong support for its taxonomic classification in its own family, <i>Ailuridae</i>, which is part of the superfamily <i>Musteloidea</i>, along with the weasel, raccoon and skunk families. Two subspecies are recognized. It is not closely related to the giant panda, which is a <i>basal ursid</i>.
      </p>
    </div>
  </div>
</main>

// Demo
.red-panda {
  shape-outside: polygon(42.33% 1.88%, 25.26% 2.64%, 14.83% 26.48%, 5.29% 24.19%, -2.33% 32%, 0.16% 50.5%, 35.67% 58.39%, 48.88% 70.26%, 59.77% 59.95%, 74.33% 65.61%, 71.14% 95.99%, 86.9% 105.44%, 93.35% 61.99%, 101.06% 58.7%, 102.34% 33.3%, 90.34% 27.83%, 80.39% 6.94%, 58.83% -4.37%);
}


// Pen Setup
.example__demo--inset {
  color: var(--color-cinder);
  font-family: 'Lora', serif;
  padding: var(--size-delta) var(--size-epsilon);
  
  h2 {
    font-size: 3rem;
    letter-spacing: 0.025em;
    margin-top: -1rem;
    margin-bottom: -0.75rem;
  }
  
  p {
    line-height: 1.75;
    
    &:nth-of-type(2) {
      font-size: 115%;
    }
  }

  a {
    background-color: var(--color-cerulean);
    letter-spacing: 0.05em;
    font-size: 0.8rem;
    margin-left: 0.5rem;
    padding: 0.25rem 0.75rem;
    text-transform: uppercase;
  }
}

.red-panda {
  float: right;
  height: auto;
  width: 14rem;
}