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