Html 如何使用css裁剪图像角以适应div？

我想从所有四个方面裁剪图像，以适应div，并使用scss获得我想要的结果？ 这是我的html：

<div class="my-auto mt-5 col-7 image-div">
  <img class="d-block mx-auto sheila-image" alt="" src="./assets/images/sheila.png">
</div>

这是现在的输出：

这就是我想要的结果：

---

请帮助我如何实现这一点？

只有您需要添加溢出：隐藏在

上。image div

.image div{
溢出：隐藏；
背景色：$蓝色；
变换：旋转（52度）比例（1.1）translateY（-79px）translateX（-67px）；
.希拉形象{
变换：旋转（-52度）比例（1）；
身高：90%；
宽度：70%；
对象匹配：覆盖；
}
}

---

只有您需要添加溢出：隐藏在

上。image div

.image div{
溢出：隐藏；
背景色：$蓝色；
变换：旋转（52度）比例（1.1）translateY（-79px）translateX（-67px）；
.希拉形象{
变换：旋转（-52度）比例（1）；
身高：90%；
宽度：70%；
对象匹配：覆盖；
}
}

添加

溢出：隐藏

到

.image div

添加

溢出：隐藏

到

.image div

.image-div{
    background-color: $blue-color;
    transform: rotate(52deg) scale(1.1) translateY(-79px) translateX(-67px);
    .sheila-image{
        transform: rotate(-52deg) scale(1);
        height: 90%;
        width: 70%;
        object-fit: cover;
    }
}