您可能遇到的一种相当常见的设计设计模式是带有渐变颜色的角度过渡的块。 看起来像下面的图片。
矩形内的角度渐变我在进行一个项目时遇到了这个问题，我们决定使用线性渐变，而不是使用图像或SVG来实现这种效果，它的优点是可以轻松更改倾斜角度，渐变颜色等。 直接在CSS中。
图2：锯齿状边缘的角度梯度结果看起来如图2所示。您可以看到，渐变色过渡的边界上出现了非常突出的突出凹口。
幸运的是，有一种非常简单的方法可以解决此问题！ 通常，当您要在线性渐变中创建突然的颜色变化线时，请编写如下代码：
background: linear-gradient(176deg, white, white 75%, black 75%, black 100%);
这意味着在块大小的0到75％范围内，填充颜色将为白色，而填充颜色将从75％-黑色开始。 这会造成锯齿状的线条。 不幸的是，在一定的倾斜角度和块大小的情况下，可能会导致难看的锯齿形。
要对此进行纠正，需要进行很小的更改-将小数部分添加到第二个百分比，这将在颜色过渡线处产生轻微的模糊。 根据您的具体情况，可能有必要选择必要的值，以使模糊不是很明显-而是在视觉上将其平滑。
background: linear-gradient(176deg, white, white 75%, black 75.3%, black 100%);
锯齿状和平滑梯度线的比较CodePen示例：
希望将来能帮助您解决问题。
感谢amakhrov提出带有“ calc”的想法我认为，使用calc（）会更可靠：不依赖于大小和倾斜角度 linear-gradient(176deg, #A663CC, #A663CC 75%, #6F2DBD calc(75% + 1px))