【HTML/CSS】画像を斜めにカットして表示する方法「clip-path」

参考にした記事

https://asobi-lab.co.jp/lecture/web/clip-path/

作成したサイト画像

コード

HTML

<div class="img">
    <img class="bgImg" src="./images/development.jpg" alt="">
</div>

CSS

.container .img .bgImg {
  clip-path: polygon(15% 0, 100% 0, 100% 100%, 0 100%);
  height: 500px;
  width: 66%;
  object-fit: cover;
}