CSS:clip-pathで簡単にマスク表現
CSSのclip-pathを使うと簡単にマスク表現が実装できます。
polygon()値
/*clip-path: polygon(x y, x y, x y, x y);*/
clip-path: polygon(0 0, 100% 0, 100% 100%, 20% 100%);

その他にも、inset()、circle()、ellipse()、path()など色々プロパティがあります。
IE以外の全てのモダンブラウザーで対応しているようなので大丈夫そうです。
https://caniuse.com/css-clip-path
参考サイト
https://developer.mozilla.org/ja/docs/Web/CSS/clip-path
https://coliss.com/articles/build-websites/operation/css/how-to-use-css-clip-path.html