如何实现图片从旋转Div中向外露出的效果？代码调试遇阻

需求说明 #

需要实现的效果为：一个45度旋转的渐变方形容器，手机图片从容器上方探出，底部被容器裁剪，呈现出图片部分露出的视觉效果。

问题分析 #

原代码存在以下几个问题导致无法实现预期裁剪：

• 容器未添加overflow: hidden属性，无法裁剪超出范围的图片
• 子元素position属性拼写错误（poition），导致绝对定位失效
• CSS语法错误：width: 100%后缺少分号
• 变换顺序与原点设置不合理，导致图片定位和旋转后不符合预期

修正后的代码 #

SCSS代码 #

.phone-box {
    background: linear-gradient(309.89deg, #FFF807 -147%, #00A0FD 170.59%);
    rotate: -45deg;
    position: relative;
    width: 20rem;
    height: 20rem;
    border-radius: 12px;
    overflow: hidden; /* 核心：开启裁剪 */

    .phone {
        position: absolute; /* 修正拼写错误 */
        top: -30%; /* 调整露出的高度，可根据图片尺寸修改 */
        left: 50%;
        transform: translateX(-50%) rotate(45deg); /* 先居中再旋转，避免偏移 */
        width: 100%; /* 补上缺失的分号 */
        transform-origin: center bottom; /* 以图片底部中心为旋转原点 */
    }
}

HTML代码 #

<div class="phone-box">
    <img class="phone" src="assets/images/advertise/phone.png"/>
</div>

关键修改说明 #

• overflow: hidden：这是实现容器裁剪超出内容的核心属性，添加后容器外的图片部分会被隐藏
• 修正语法错误：修复position拼写和width后的分号问题，确保CSS正常解析
• 变换顺序调整：先执行translateX(-50%)实现水平居中，再执行rotate(45deg)，避免旋转导致的定位偏移
• 旋转原点设置：transform-origin: center bottom让图片以自身底部中心旋转，配合父容器的反向旋转，更贴合“探出”的视觉逻辑
• 定位调整：通过负top值控制图片露出容器的高度，可根据实际图片尺寸灵活调整数值

内容的提问来源于stack exchange，提问作者Muhammad Waqar