<svg class="svg">
  <clipPath id="my-clip-path" clipPathUnits="objectBoundingBox">
    <path d="M0,0.815 V0 L1,0.172 V1 L0,0.815"></path>
  </clipPath>
</svg>

<div class="element"></div>
body {
  padding: 40px;
  background: #eee;
}

.svg {
  position: absolute;
  width: 0;
  height: 0;
}

.element {
  width: 350px;
  height: 500px;
  -webkit-clip-path: url(#my-clip-path);
  clip-path: url(#my-clip-path);
  background: cornflowerblue;
}

External CSS

  1. https://moonpresence.site/moonpresence/foundation/css/base.css

External JavaScript

This Pen doesn't use any external JavaScript resources.