如何移除CSS剃刀形状布局左右两侧的细线？

你遇到的细线是浏览器亚像素渲染偏差、定位逻辑不精准导致的，结合你的代码，这里有直接的修复方案：

核心问题分析 #

1. .footer-left::after使用relative定位，会跟随父元素布局流产生微小偏移，再加上vw单位在特定宽度下会生成小数像素，浏览器渲染时就会出现缝隙。
2. 容器与伪元素的尺寸没有完全覆盖边缘，导致漏色细线出现。

具体修复步骤 #

1. 修正伪元素定位逻辑 #

把伪元素的定位从relative改为absolute，让它精准贴合父元素的右侧和顶部，避免布局流带来的偏移：

.footer-left::after {
  content: "";
  position: absolute; /* 替换原有的relative */
  right: 0; /* 固定到父元素右侧 */
  top: 0; /* 固定到父元素顶部 */
  border-left: 7vw solid #7843E6;
  border-bottom: 100vh solid #18181B;
  z-index: -1;
}

2. 覆盖亚像素缝隙 #

给.footer-left添加overflow: hidden，同时轻微扩大伪元素的尺寸，彻底覆盖可能出现的亚像素缝隙：

.footer-left {
  display: flex;
  position: relative;
  width: 60%;
  background-color: #7843E6;
  z-index: 1;
  box-sizing: border-box;
  overflow: hidden; /* 添加该属性 */
}

.footer-left::after {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  border-left: 7.1vw solid #7843E6; /* 轻微加大宽度 */
  border-bottom: 101vh solid #18181B; /* 轻微加大高度 */
  z-index: -1;
}

3. 避免滚动条干扰布局 #

给body添加overflow: hidden，防止页面出现滚动条导致布局宽度变化，间接引发缝隙：

body {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden; /* 添加该属性 */
}

完成以上修改后，调试响应式宽度时，布局两侧的细线就会消失。

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