CSS定位问题：无法将图片定位到div外部区域

数据老陈

2026-7-13

问题描述

我需要实现一个带横向渐变倾斜背景、两侧有装饰图片的设计，但当前代码显示效果不符合预期，移除clip-path后问题仍存在。

我的代码

HTML

<div className='relative mt-64 mb-40 md:h-56 h-36 w-full gradient z-10'>
    <img className='bg-transparent w-20 h-28 absolute md:top-40 md:left-10 -left-10 z-50 ' src="images/Frame.png" alt="" />
    <img className='bg-transparent w-20 h-28 absolute md:top-10 md:right-10 -right-10 z-50' src="images/Frame.png" alt="" />
</div>

CSS

.gradient{
    background: linear-gradient(90deg, #9C4F96 0%, #FF6355 17.19%, #FBA949 34.38%, #FAE442 49.48%, #8BD448 69.79%, #2AA8F2 100%);
    transform: skewY(-7deg);
    overflow: hidden;
    clip-path: polygon(0% 0, 100% 0, 100% 100%, 0% 100%);
}

解决方案

问题核心是transform: skewY(-7deg)直接作用在容器上，导致内部图片跟着倾斜，同时overflow:hidden会裁剪超出容器的图片。可以用伪元素单独处理渐变背景的倾斜，让容器本身保持正常状态：

修改后的CSS

.gradient {
    position: relative;
    /* 移除原有的背景、transform、overflow、clip-path属性 */
}

.gradient::before {
    content: '';
    position: absolute;
    top: -10%;
    left: 0;
    width: 100%;
    height: 120%;
    background: linear-gradient(90deg, #9C4F96 0%, #FF6355 17.19%, #FBA949 34.38%, #FAE442 49.48%, #8BD448 69.79%, #2AA8F2 100%);
    transform: skewY(-7deg);
    z-index: -1;
}