Search code examples
cssclip-path

I am having an issue displaying Clip-Path on iphone chrome/safari browser

I have created a test project at http://secretchickens.com/ using clip-paths to adjust the background. It works great on computer browsers, but on my iPhone with chrome/safari I can't see the clip-path. Do I need to do anything to make this work?

Solution

  • You can add -webkit-clip-path style in your CSS for webkit browsers.

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