Result


インラインに書いたSVGを画像に重ねる
背景と色を合わせれば簡単にユニークな形状のヘッダ画像を実装できる

css

Code :
.card {
  width: 32%;
  max-width: 100%;
  margin: 0 0 4rem;
  background-color: #ddd;
}
.card .wrap-image {
  position: relative;
}
.card .wrap-image img {
  width: 100%;
  height: auto;
}
.card .wrap-image svg {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 30px;
}
.card .wrap-image svg polygon, .card .wrap-image svg path {
  fill: #ddd;
  stroke: #ddd;
}
.card:nth-child(4) .wrap-image svg path {
  stroke-width: 3px;
}
.card:nth-child(5) .wrap-image svg path {
  stroke-width: 4px;
}
.card:nth-child(6) .wrap-image svg path {
  stroke-width: 6px;
}

html

Code :
<div class="card">
    <div class="wrap-image">
      <img src="https://picsum.photos/400/300">
      <svg viewBox="0 0 100 100" preserveAspectRatio="none">
        <polygon points="0,100 100,100 100,0"></polygon>
      </svg>
    </div>
    <div class="contents">
      <h3>bar</h3>
      <div class="text">foo</div>
    </div>
  </div>

via

Non Rectangular Headers with inline SVG