| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <style> |
| |
| #div1 { |
| width: 200px; |
| height: 200px; |
| -webkit-clip-path: circle(); |
| background-color: green; |
| } |
| #div2 { |
| width: 200px; |
| height: 200px; |
| -webkit-clip-path: ellipse(150px 75px at 150px 75px); |
| background-color: green; |
| } |
| * { |
| padding: 0; |
| margin: 0; |
| } |
| </style> |
| <div id="div1"></div> |
| <div id="div2"></div> |
| <svg> |
| <clipPath id="clip"> |
| <ellipse cx="100" cy="100" rx="100" ry="100"/> |
| </clipPath> |
| <clipPath id="clip2"> |
| <ellipse cx="50%" cy="50%" rx="50%" ry="50%"/> |
| </clipPath> |
| </svg> |
| </html> |
