| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <style> | |
| #div1 { | |
| width: 200px; | |
| height: 200px; | |
| -webkit-clip-path: url("#clip"); | |
| background-color: green; | |
| } | |
| #div2 { | |
| width: 200px; | |
| height: 200px; | |
| -webkit-clip-path: url("#clip2"); | |
| 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> |