clip-path（クリップパス）を使うと、その画像や要素をトリミングすることが出来ます。
◆まずはデモページをご覧ください。
デモページを見る
clip-path（クリップパス）の種類は以下4つがあります。
・polygon：多角形
・circle：円形
・ellipse：楕円形
・inset：四角形
例として、三角形の書き方は下記になります。
x座標とy座標をカンマで区切り、順番に指定していきます。
CSS
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
デモページは下記の記述になっています。
CSS
.cut_img {
clip-path: polygon(20% 0, 100% 0, 100% 100%, 0% 100%);
}
clip-path: polygon(20% 0, 100% 0, 100% 100%, 0% 100%);
}
ただ、毎回座標を考えるのは難しいのでは？
という事で、クリップパスを作れる便利なジェネレーターがあります。
座標をドラックで移動でき、形が決まったら下部のコードをコピペできます。
https://bennettfeely.com/clippy/
画像を加工する必要が無いため、便利です。