如何使用直线裁切盒子左下角及解决linear-gradient裁切出现锯齿的问题

嘿，我看到你在尝试用linear-gradient裁切盒子左下角时遇到了锯齿边缘的问题，咱们来拆解一下问题并解决它～

问题出在哪？ #

你的代码里的linear-gradient配置确实有两处小问题，导致了锯齿的出现：

• 颜色停止值顺序错误：你写了transparent 15px, #231f20 10px，这意味着在10px到15px的区间内会产生实色到透明的渐变过渡，这个模糊的过渡区域就会表现为锯齿。
• 角度选择不合适：35deg的角度并不是刚好对应左下角裁切的直线方向，进一步加剧了边缘的锯齿感。

修复后的linear-gradient实现 #

要得到清晰的直线裁切，我们需要让透明区域和实色区域的停止值完全重合，消除过渡区间，同时选择正确的角度：

.box {
  width: 200px;
  height: 100px;
  background: linear-gradient(135deg, transparent 15px, #231f20 15px);
}

<div class="box"></div>

解释一下：

• 135deg的角度刚好对应从右上角指向左下角的方向，完美匹配左下角裁切的直线角度。
• transparent 15px, #231f20 15px让两种颜色在15px的位置直接切换，没有渐变过渡，边缘自然就是清晰的直线，不会出现锯齿。

更灵活的替代方案：clip-path #

如果你需要裁切更复杂的形状，或者想让代码更直观，clip-path是个很好的选择，它天生不会产生锯齿：

.box {
  width: 200px;
  height: 100px;
  background-color: #231f20;
  /* 定义多边形路径：左下角裁切15px的角 */
  clip-path: polygon(0 15px, 15px 0, 100% 0, 100% 100%, 0 100%);
}

这个方法通过定义盒子的可见区域多边形，直接裁切出想要的形状，边缘清晰度很高，也更容易调整裁切的尺寸和形状。

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