33 lines
559 B
HTML
33 lines
559 B
HTML
|
<!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>
|