我在iPhone chrome / Safari浏览器上显示Clip-Path时遇到问题

Question

我已经在http://secretchickens.com/创建了一个测试项目，该项目使用剪切路径来调整背景。它可以在计算机浏览器上很好地工作，但是在带chrome / safari的iPhone上，我看不到剪切路径。 我需要做任何事情来使这项工作吗？

Answer 1

您可以在CSS中为Webkit浏览器添加-webkit-clip-path样式。

.shape1{
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 40%, 0 80%);
  clip-path: polygon(0 0, 100% 0, 100% 40%, 0 80%);
}
.shape2 {
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 70%, 0 40%);
  clip-path: polygon(0 0, 100% 0, 100% 70%, 0 40%);
}
.shape3 {
  -webkit-clip-path: polygon(30% 0, 100% 0, 100% 100%, 20% 100%);
  clip-path: polygon(30% 0, 100% 0, 100% 100%, 20% 100%);
}