如何实现无水平滚动条、无可见端点的全屏倾斜页面条纹？

当前实现的倾斜条纹存在两个问题：页面出现水平滚动条，条纹两端有可见端点，无法实现真正的全屏覆盖。以下是修复方案：

修改后的完整代码 #

CSS 代码 #

html, body {
    overflow-x: hidden;
    margin: 0;
    padding: 0;
}
body {
    display: flex;
    margin: 0;
    padding: 0;
}

.flag-strip {
    position: absolute;
    width: 150vw; /* 加宽元素，确保旋转后覆盖全屏 */
    height: 15px;
    left: 50%;
    transform: translateX(-50%) rotate(-10deg); /* 先居中再旋转，避免偏移 */
    z-index: 1;
}

.flag-strip.red {
    background-color: #D90012;
    top: 9%;
}

.flag-strip.blue {
    background-color: #0033A0;
    top: 10.5%;
}

.flag-strip.orange {
    background-color: #F2A800;
    top: 12%;
}

@media (max-width: 878px) {
    .flag-strip.red {
        top: 11%;
    }

    .flag-strip.blue {
        top: 12.5%;
    }

    .flag-strip.orange {
        top: 14%;
    }
}

HTML 代码 #

<div class="flag-strip red"></div>
<div class="flag-strip blue"></div>
<div class="flag-strip orange"></div>

关键修改说明 #

• 加宽条纹宽度：将width: 100vw改为150vw，确保元素旋转后左右两端都能超出视口范围，避免出现可见端点
• 调整旋转定位逻辑：使用left: 50%结合translateX(-50%)先让元素水平居中，再执行旋转操作，防止旋转后元素偏移导致一侧露出
• 保留溢出隐藏：维持html, body的overflow-x: hidden配置，确保超出视口的部分被隐藏，彻底消除水平滚动条

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