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> |