页面缩放时带边框切角元素显示异常问题求助

你的问题出在当前用固定像素值的伪元素border和旋转线条实现切角，页面缩放时浏览器的亚像素渲染会导致伪元素与父元素边缘出现缝隙，看起来像边框。固定像素的定位、大小在缩放时无法精确对齐，旋转transform的亚像素计算也会加剧这个问题。

推荐方案：用clip-path实现稳定切角 #

clip-path是基于矢量形状的元素裁剪，缩放时会自适应元素比例，完全避免像素对齐问题，代码更简洁：

/* 保留原btn样式，给cut-corner添加裁剪 */
.cut-corner {
  position: relative;
  /* 定义切角形状：左上、右上、右上切角点、右下切角点、左下 */
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 25px), calc(100% - 18px) 100%, 0 100%);
}

/* 调整绿色斜线条的实现，用百分比定位避免缩放偏移 */
.cut-corner::before {
  content: '';
  position: absolute;
  bottom: 0;
  right: 18px;
  width: calc(100% - 18px);
  height: 2px;
  background-color: #5bd9ab;
  transform: rotate(-33deg);
  transform-origin: bottom right; /* 固定旋转原点，避免缩放偏移 */
  z-index: 3;
  pointer-events: none;
}

<div class="btn btn-primary cut-corner position-relative">Edit</div>

原方案的修复尝试（不推荐） #

如果必须保留伪元素border的实现方式，可以尝试以下调整缓解问题：

• 把固定像素值改为百分比，让伪元素大小随父元素缩放：

  .cut-corner::after {
    border-top: 20% solid transparent;
    border-right: 15% solid $color_1;
    bottom: -1%;
    right: -1%;
  }
  

• 给伪元素添加硬件加速，提升渲染精度：

  .cut-corner::after, .cut-corner::before {
    transform: translateZ(0);
  }
  

clip-path方案在现代浏览器兼容性良好，是解决这类缩放渲染问题的最优解。

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