| <!DOCTYPE html> |
| <style> |
| .container { |
| width: 100px; |
| height: 100px; |
| background-color: red; |
| display: inline-block; |
| } |
| |
| .clip { |
| width: 100px; |
| height: 100px; |
| background-color: green; |
| } |
| |
| .test-top-left { |
| -webkit-clip-path: inset(0 round 50px 0 0 0); |
| } |
| |
| .check-top-left { |
| border-radius: 50px 0 0 0; |
| } |
| |
| .test-top-right { |
| -webkit-clip-path: inset(0 round 0 50px 0 0); |
| } |
| |
| .check-top-right { |
| border-radius: 0 50px 0 0; |
| } |
| |
| .test-bottom-right { |
| -webkit-clip-path: inset(0 round 0 0 50px 0); |
| } |
| |
| .check-bottom-right { |
| border-radius: 0 0 50px 0; |
| } |
| |
| .test-bottom-left { |
| -webkit-clip-path: inset(0 round 0 0 0 50px); |
| } |
| |
| .check-bottom-left { |
| border-radius: 0 0 0 50px; |
| } |
| </style> |
| <body> |
| <p>You should see 4 green squares each with one rounded corner. You should not see any red.</p> |
| <div class="container check-top-left"><div class="clip test-top-left"></div></div> |
| <div class="container check-top-right"><div class="clip test-top-right"></div></div> |
| <br/> |
| <div class="container check-bottom-left"><div class="clip test-bottom-left"></div></div> |
| <div class="container check-bottom-right"><div class="clip test-bottom-right"></div></div> |
| </body> |
