IEのサポートがおわるから使えなかったCSS3の技術がたくさん使えるようになりました。
その一つにCSSでマスクですね。

Can I use mask-image

使える技術はどんどんつかっていこーってことでメモメモ

まずはグラデーションでマスクしてみたよ。

See the Pen
mask : Gradation by msys (@msys)
on CodePen.

イメージはこんな感じです。
画像にグラデーションでマスクしたみたイメージです。

img{
  width: 100%;
  height: 100%;
  object-fit: cover;

  -webkit-mask-image: linear-gradient(to top, transparent 0%, black 50%);
  mask-image: linear-gradient(to top, transparent 0%, black 50%);
}

mask-image が書いてるところがそれ、画像にグラデーションのっけて、それでマスクしたってことですかね。

See the Pen
mask : svg by msys (@msys)
on CodePen.

img{
  width: 100%;
  height: 100%;
  object-fit: cover;

  -webkit-mask-image: url('data:image/svg+xml;charset=utf8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="691px" height="549px"><path fill-rule="evenodd"  fill="rgb(229, 43, 41)" d="M127.199,0.150 L690.299,0.150 L690.299,548.150 L0.0,548.150 L0.0,128.585 L127.199,0.150 Z"/></svg>');
  mask-image: url('data:image/svg+xml;charset=utf8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="691px" height="549px"><path fill-rule="evenodd"  fill="rgb(229, 43, 41)" d="M127.199,0.150 L690.299,0.150 L690.299,548.150 L0.0,548.150 L0.0,128.585 L127.199,0.150 Z"/></svg>');
  -webkit-mask-size: cover;
  mask-size: cover;
/* } */

ｓｖｇを作ってそのまま、それを指定してもいいですね。
簡単なsvgなら直接ぶっこんだほうが、早いかなっておもいます。

mask-position: 0 0; // マスクのポジションを指定
mask-size: cover;　　　　　 // マスクのサイズを指定

まぁ、位置とかサイズを指定する場合はこういう感じのを指定してください。

ほんとに簡単にできて良い世の中になったよね。