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://developer.mozilla.org/ja/docs/Web/CSS/clip-path
https://coliss.com/articles/build-websites/operation/css/how-to-use-css-clip-path.html