Chrome 上的剪辑路径在边缘留下一条奇怪的线
fed*_*1it 11 css google-chrome clip-path
我使用Clip-path创建蓝色搜索按钮的特定形状。
在 Chrome 中，您会在切口边缘看到一条奇怪的线，而在 Firefox 中，一切正常。
我不是第一个指出这一点的人，但我还没有找到解决方案。
铬合金
火狐浏览器
剪辑路径是：
clip-path: polygon(0 0, 0 100%, 15px 50%);
这到底是什么玄机呢？我也发现了类似的问题：
我有一个类似的（如果不是相同的）问题，我通过向元素添加以下样式来修复此问题clip-path：
transform: translateZ(0)
- 或更短的 `transform:scaleZ(1)` - 对于 cssbattle 爱好者:) (3认同)
就我而言，建议transform: translateZ(0)并transform: scaleZ(1)没有帮助，但这个是的......
transform: skewY(0.001deg);
更新：它解决了某些设备上的问题，但没有解决具有相同 chrome 版本的其他设备上的问题（！）。所以这个 Chromium bug 非常令人不快，而且很容易被破解。我们必须从头开始重构它，并使用 Clip-path CSS 属性创建三角形作为整个箭头按钮的一部分......
clip-path: polygon(30px 0%, 100% 0%, 100% 100%, 30px 100%, 0 50%);
这是一个生成剪辑路径的工具：https ://unused-css.com/tools/clip-path-generator
小智 5
我遇到了类似的问题，剪辑路径的右边缘正好位于 100% 的内部。我可以通过将右边缘 x 坐标值设置为 101% 并添加overflow: hidden;到父元素来解决此问题。
clip-path: polygon(0 0, 101% 0, 101% 80%, 0 100%);
我想你可以通过输入负值在左侧做同样的事情？
