blob: 643a21800b17dd398ddd1290efd6d3471e1947ce [file] [log] [blame]
<!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>