bottom angled border

by jorgeluis

HTML

<h1>
The Challenge:
</h1>
<p>
Apply a bottom border to any image, cut at an angle, extending past the sides, and with a gradient. The background under the angle and to the left and right of the image should be transparent.
</p>

<div class="is-flex">

  <div class="clip-img-container">
    <img class="clip-img" src="http://placekitten.com/300/400" alt=""/>
  </div>


  <div class="clip-img-container">
    <img class="clip-img" src="http://placekitten.com/300/400" alt=""/>
  </div>

</div>

CSS

.clip-img-container {
  position: relative;
  padding-bottom: 5px;
  margin: 0 0.5rem 1rem;
  flex-basis: 48%;
  clip-path: polygon(0 0, 100% 0, 100% 96%, 0 100%);
}
.clip-img-container::after {
  position: absolute;
  left: 0; bottom: 10px;
  content: "";
  height: 20px; 
  width: 100%;
  background: 
    transparent   
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none' viewBox='0 0 300 83'%3E%3Cdefs%3E%3ClinearGradient id='gradient-border-a' x1='0%25' x2='100%25' y1='50%25' y2='50%25'%3E%3Cstop offset='0%25' stop-color='%2362C8D9'/%3E%3Cstop offset='100%25' stop-color='%23FCAB62'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpolygon fill='url(%23gradient-border-a)' fill-rule='evenodd' points='0 49 300 0 300 34 0 83'/%3E%3C/svg%3E%0A")
    bottom
    left
    no-repeat;
}

.clip-img {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  padding-right: 1rem;
  padding-left: 1rem;
  clip-path: polygon(0 0, 100% 0, 100% 95%, 0 97%);
}


.is-flex {
  display: flex;
  justify-content: center;
}