<div class="container-1">
  <img src="https://tympanus.net/codrops-playground/assets/images/cssref/properties/clip-path/beach.jpg" alt="Beach">
</div>
<p><em>Element clipped using an SVG clip path.</em></p>
<svg>
  <defs>
    <clipPath id="thePath">
      <path fill="#FFFFFF" stroke="#000000" stroke-width="1.5794" stroke-miterlimit="10" d="M215,100.3c97.8-32.6,90.5-71.9,336-77.6
        c92.4-2.1,98.1,81.6,121.8,116.4c101.7,149.9,53.5,155.9,14.7,178c-96.4,54.9,5.4,269-257,115.1c-57-33.5-203,46.3-263.7,20.1
        c-33.5-14.5-132.5-45.5-95-111.1C125.9,246.6,98.6,139.1,215,100.3z"/>
    </clipPath>
  </defs>
</svg>

<div class="container-2"> 
  <img src="https://tympanus.net/codrops-playground/assets/images/cssref/properties/clip-path/beach.jpg" alt="Beach">
</div>
<p><em>Element clipped using a CSS polygon() function. Notice how you can scroll inside the element even when it is clipped because the clip path only changes the viewport shape, not the content inside of the element.</em></p>
body {
  background-color: #F5F5F5;
  color: #555;
  font-size: 1.1em;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

.container-1 {
  margin: 0 auto;
  width: 90%;
  border: 1px dotted #eee;
  background-color: #fff;
}

.container-1 img {
  max-width: 100%;
  -webkit-clip-path: url(#thePath);
  clip-path: url(#thePath);
}

img {
  max-width: 100%;
}

.container-2 {
  margin: 40px auto 0;
  /* width: 90%; */
  padding: 3em;
  background-color: white;
  -webkit-clip-path: polygon(17% 13%, 33% 9%, 58% 21%, 84% 20%, 83% 63%, 66% 76%, 15% 83%, 25% 45%);
  clip-path: polygon(17% 13%, 33% 9%, 58% 21%, 84% 20%, 83% 63%, 66% 76%, 15% 83%, 25% 45%);
  -webkit-transition: -webkit-clip-path .6s ease-out;
  transition: -webkit-clip-path .6s ease-out;

}

p {
  margin: 0 auto;
  text-align: center;
  padding: 0 1em;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.