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

Question

我在 http://secretchickens.com/ 创建了一个测试项目，使用剪辑路径调整背景。它在计算机浏览器上运行良好，但在我的 iPhone 和 chrome/safari 上我看不到剪辑路径。 我需要做些什么才能使这项工作正常进行吗？

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%);
}