如何让绝对定位的.corner元素触碰内容区边缘时自动移出屏幕外

你可以通过CSS动态计算偏移量实现需求，不需要JS介入，修改步骤如下：

• 调整.corner的right属性，通过计算自动控制斜角的偏移位置
• 给.header-content设置更高层级，避免内容被斜角遮挡
• 增加移动端媒体查询，按需求隐藏斜角元素

完整修改后CSS代码 #

.header {
    max-width: 1080px;
    margin: 0 auto;
    padding: 10px;
    background-color: #FAAC38;
}
.corner {
    width: 253px;
    position: absolute;
    /* 核心动态偏移逻辑 */
    right: min(0px, calc((100vw - 1080px)/2 - 253px));
    border: 0 solid #f8f9fa;
    border-bottom-width: 168px;
    border-top-width: 0px;
    border-left: 168px solid #FAAC38;
}
/* 保证header内容层级高于斜角，不会被遮挡 */
.header-content {
    position: relative;
    z-index: 1;
}
.main {
    max-width: 1080px;
    margin: 5px auto;
    padding: 60px;
    background-color: #fff;
    border: 1px solid #e9ecef;
}
/* 移动端直接隐藏斜角 */
@media (max-width: 768px) {
    .corner {
        display: none;
    }
}

实现逻辑 #

(100vw - 1080px)/2 计算的是当前视口下，居中1080px内容区左右两侧的空白宽度
当两侧空白宽度≥253px（斜角自身宽度）时，right取值为0，斜角正常显示在视口右侧
当两侧空白宽度<253px时，right取值为负数，将斜角向右侧屏幕外推，保证斜角左边缘始终和内容区右边缘对齐，不会遮挡内容

旧浏览器兼容方案 #

如果需要兼容不支持CSS min()函数的场景，可以替换为媒体查询写法：

.corner {
    width: 253px;
    position: absolute;
    right: 0;
    border: 0 solid #f8f9fa;
    border-bottom-width: 168px;
    border-top-width: 0px;
    border-left: 168px solid #FAAC38;
}
/* 屏幕宽度小于 1080 + 253*2 = 1586px 时触发偏移 */
@media (max-width: 1586px) {
    .corner {
        right: calc((100vw - 1080px)/2 - 253px);
    }
}

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