如何用CSS实现响应式直角梯形：全屏适配且移动端转矩形条

需求说明 #

• 实现响应式直角梯形，始终适配屏幕无白边
• 移动端自动转为矩形条
• 缩放时自动适配屏幕尺寸

改进后的代码 #

HTML #

<body>
    <div class="trapezoid-container">
        <img src="https://picsum.photos/300" alt="示例图片">
    </div>    
</body>

CSS #

/* 基础样式：直角梯形 */
.trapezoid-container {
    position: relative;
    width: 100vw;
    height: 50vw;
    background-color: #9a9ebe;
    /* 使用clip-path实现直角梯形，适配全屏无白边 */
    clip-path: polygon(0 0, 85% 0, 100% 100%, 0 100%);
    overflow: hidden;
}

/* 内部图片响应式定位 */
.trapezoid-container img {
    position: absolute;
    bottom: 5vw;
    left: 10vw;
    width: 20vw;
    /* 确保图片不会超出容器 */
    max-width: 200px;
}

/* 移动端媒体查询：转为矩形条 */
@media (max-width: 768px) {
    .trapezoid-container {
        clip-path: none;
        height: 20vw;
    }
    .trapezoid-container img {
        bottom: 50%;
        left: 50%;
        transform: translate(-50%, 50%);
        width: 30vw;
    }
}

代码说明 #

• 用clip-path替代原伪元素方案，通过多边形坐标精准控制梯形形状，避免适配时出现白边
• 所有尺寸采用vw单位，保证缩放时自动匹配屏幕比例
• 媒体查询触发移动端适配：移除梯形裁剪效果转为矩形条，同时调整图片居中显示
• 图片使用相对容器的定位逻辑，替代固定margin-top，确保响应式场景下位置合理

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