如何使用CSS实现可响应的旋转矩形背景效果？

你当前的问题核心是使用固定像素定位+固定宽高的旋转元素，无法适配不同屏幕宽度的居中需求，以下是两种可落地的实现方案：

方案1：使用clip-path实现（推荐，代码最简） #

直接用clip-path属性绘制目标形状，百分比单位天然适配响应式场景，底部箭头永远居中：

.outer {
    background: grey;
    position: relative;
    overflow: hidden;
    /* 可自行修改外层容器的尺寸配置 */
    min-height: 600px;
}
.outer .bg-shape {
    width: 100%;
    /* 调整这个数值可以控制形状整体高度 */
    height: 400px;
    background: linear-gradient(#EFF0F4, #D1D1D6);
    /* polygon参数依次对应：左上角、右上角、右侧折角点、底部箭头尖、左侧折角点，可调整百分比修改形状 */
    clip-path: polygon(0 0, 100% 0, 100% 80%, 50% 100%, 0 80%);
}

该方案不需要旋转元素，所有坐标用百分比设置，无论屏幕宽度多大，底部箭头尖的位置永远为水平50%，自动居中。

方案2：优化旋转矩形方案（兼容不支持clip-path的场景） #

你原有方案修改几个配置项即可实现响应式适配：

1. 替换固定的left、top像素值，使用居中定位逻辑
2. 宽高改用相对单位，适配不同屏幕尺寸

.outer {
    background: grey;
    position: relative;
    overflow: hidden;
    min-height: 600px;
}
.outer .rect {
    position: absolute;
    /* 先做水平居中定位 */
    left: 50%;
    top: -20%;
    /* 先拉回自身宽度的50%实现水平居中，再执行旋转 */
    transform: translateX(-50%) rotate(45deg);
    /* 用相对单位适配不同屏幕，加最大宽度限制避免超大屏下尺寸过大 */
    width: min(120vw, 1600px);
    /* 宽高保持一致为正方形，旋转后才会生成规则菱形 */
    height: min(120vw, 1600px);
    background: linear-gradient(#EFF0F4, #D1D1D6);
}

该方案的核心是通过left:50% + translateX(-50%)保证旋转正方形永远水平居中，旋转后的底部尖自然对齐容器水平中心，宽高用min()结合vw单位，同时兼顾小屏和大屏的适配效果。

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