旋转div无法铺满页面且定价区container-sub水平对齐问题求助

一、解决旋转div铺满页面且无滚动条问题 #

旋转元素会因几何变形超出视口，进而产生滚动条，按以下步骤修改：

1. 给全局body添加溢出隐藏，避免旋转元素溢出：

body {
    margin: 0; /* 清除默认边距 */
    overflow: hidden;
}

2. 调整旋转容器（article和#pricing）的尺寸与定位，确保旋转后完全覆盖视口：

article {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    width: 110vw; /* 加宽容器抵消旋转后的边缘溢出 */
    height: 60vh;
    margin: 0; /* 清除默认auto边距，避免上下空隙 */
    padding: 2em 0;
    background-color: white;
    color: black;
    font-size: 3em;
    font-family: 'Lato', sans-serif;
    transform: rotate(-5deg);
    transform-origin: center; /* 以容器中心为旋转点 */
    position: relative;
    left: -5%; /* 向左偏移修正旋转后的位置偏移 */
}

二、解决定价区域container-sub水平对齐问题 #

原代码通过父容器旋转再给子元素反向旋转的方式会导致布局错乱，改用伪元素实现背景旋转，让子元素不受旋转影响：

1. 修改#pricing的CSS，移除自身旋转，用伪元素实现背景旋转：

#pricing {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center; /* 让卡片垂直居中 */
    width: 100%;
    height: 60vh;
    margin: 0;
    padding: 2em 0;
    color: black;
    font-size: 3em;
    font-family: 'Lato', sans-serif;
    position: relative;
    overflow: hidden; /* 隐藏伪元素溢出部分 */
}

/* 用伪元素添加旋转背景 */
#pricing::before {
    content: '';
    position: absolute;
    top: 0;
    left: -5%;
    width: 110vw;
    height: 100%;
    background-color: white;
    transform: rotate(-1deg); /* 原-355deg等价于1deg，保持视觉一致 */
    transform-origin: center;
    z-index: -1; /* 把背景放在内容下方 */
}

2. 调整#pricing h2和container-sub的样式，移除反向旋转，修复对齐：

#pricing h2 {
    flex-shrink: 0;
    flex-basis: 100%;
    text-align: center;
    /* 移除transform: rotate(355deg) */
}

.container-sub {
    height: 7.5em;
    width: 5em;
    margin: 0 1.5em; /* 用左右边距控制卡片间距，实现水平对齐 */
    border-radius: .6rem;
    display: flex;
    flex-direction: column;
    align-items: center; /* 让内部元素水平居中 */
    background-color: hsl(0, 0%, 100%);
    box-shadow: 5px 5px 10px 5px hsl(220, 15%, 55%);
    /* 移除transform: rotate(355deg) */
}

.container-sub button {
    margin-top: auto; /* 把按钮推到卡片底部 */
}

效果说明 #

• 旋转容器完全覆盖视口，无滚动条出现
• 定价卡片水平均匀排列，内部内容正常显示，不再受父元素旋转影响

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