<header class="header">
  <div class="header__title">
    <h1>
      <code>inset()</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/#search=inset()">caniuse Support</a></li>
    </ul>
  </div>
</header>

<main>
  <div class="example">
    <p>
      In this example, an image with the class of <code>building</code> has an inset clip path applied to it. The clip path's four arguments tell it to mask the image <code>15%</code> from the top, <code>20%</code> from the right, <code>10px</code> from the bottom, and <code>3vw</code> from the left. This allows the background texture the image is placed over to show through.
    </p>
    <p>
      Try playing around with <code>clip-path()</code>'s four arguments to see how it changes the mask's shape.
    </p>

    <div class="example__demo example__demo--inset">
      <div class="background">
        <div class="inset"></div>
        <img
          class="building"
          alt="A stark, purple geometric building photographed from the ground looking up." 
          src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/11907/vitalik-vynarchyk-0PePaKnEmuM-unsplash.jpg" />
      </div>
    </div>
  </div>
  
  <aside>
    <p>
      <small><a href="https://unsplash.com/photos/0PePaKnEmuM">"mallard duck on dock photo"</a> by <a href="https://unsplash.com/@karton55">Vitalik Vynarchyk</a> on <a href="https://unsplash.com/">Unsplash</a>.</small>
    </p>
  </aside>
</main>

// Demo
.building {
  clip-path: inset(15% 20% 10px 3vw);
}


// Pen Setup
.example__demo--inset {
  padding: 0;
  background: var(--color-topaz) url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/11907/funky-lines.png") repeat;
}

.building {
  height: auto;
  width: 100%;
}