页面弧形线条随屏幕尺寸移位问题求助（附CSS代码）

问题分析 #

当前用position: absolute+bottom: 0的方案，会让弧形始终贴合父容器或视口底部，缩放屏幕时vw单位的宽高结合绝对定位的偏移规则会导致位置偏移；滚动时绝对定位元素会随父容器或视口滚动而移动，不符合固定弧形的需求。

解决方案 #

改用position: fixed固定元素在视口，调整定位偏移和边框显示，实现固定位置且不随滚动/缩放移位的弧形：

.line_arc-1 {
    position: fixed; /* 固定在视口，不受滚动和父容器位移影响 */
    left: -125vw; /* 向左偏移元素宽度的一半，让圆心对齐视口右侧 */
    top: calc(100vh - 200vw); /* 让元素底部刚好贴合视口底部 */
    width: 250vw;
    height: 200vw;
    border: 2px solid #fff;
    border-radius: 100%;
    border-top-color: transparent; /* 隐藏顶部边框，只保留右下弧形 */
    border-left-color: transparent; /* 隐藏左侧边框 */
    z-index: -100;
}

关键修改说明 #

1. position: fixed：元素相对于浏览器视口定位，滚动页面时不会移动，缩放屏幕时位置始终相对于视口保持一致。
2. 偏移量计算：
   • left: -125vw：元素宽度是250vw，向左偏移一半后，弧形的圆心刚好落在视口的右侧边缘，确保弧形的右下部分自然覆盖页面右侧区域。
   • top: calc(100vh - 200vw)：通过视口高度减去元素高度，让元素底部完全贴合视口底部，避免移除bottom后形状倒转的问题。
3. 隐藏多余边框：通过设置transparent隐藏左上边框，只保留需要的右下弧形，更贴近目标效果。

额外注意 #

如果父级容器存在transform属性，position: fixed会降级为absolute的行为，需确保父容器没有这类属性，否则固定定位会失效。

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