如何使用 css 切割图像角落以适合 div？ [复制]

Posted 2023-02-25

【中文标题】如何使用 css 切割图像角落以适合 div？ [复制]

【英文标题】：How to cut image corners to fit div using css? [duplicate]

【发布时间】：2020-03-02 09:32:45

【问题描述】：

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

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

这是我的 scss 代码：

.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;
    

这是现在的输出：

这是我想要的输出：

请帮助我如何实现这一目标？

【问题讨论】：

将overflow: hidden; 添加到.image-div

【参考方案1】：

只需要在.image-div上添加overflow:hidden

.image-div
    overflow:hidden;
    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;
    

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