Source code
Revision control
Copy as Markdown
Other Tools
<!-- Any copyright is dedicated to the Public Domain.
<!DOCTYPE html>
<meta charset="utf-8">
<style>
html, body {
height: 100%;
margin: 0;
}
.wrapper {
width: 800px;
height: 800px;
background: #f06;
}
#polygon {
clip-path: polygon(0 0%,
100px 50%,
200px 0,
300px 50%,
400px 0,
500px 50%,
600px 0,
700px 50%,
800px 0,
90% 100%,
50% 60%,
10% 100%);
}
#circle {
clip-path: circle(25% at 30% 40%);
}
#circle-without-position {
clip-path: circle(25%);
}
#ellipse {
clip-path: ellipse(40% 30% at 25% 30%) content-box;
padding: 20px;
}
#ellipse-padding-box {
clip-path: ellipse(40% 30% at 25% 30%) padding-box;
padding: 20px;
}
#inset {
clip-path: inset(200px 100px 30% 15%);
}
.svg {
width: 800px;
height: 800px;
}
#rect {
clip-path: polygon(0 0,
100px 50%,
200px 0,
300px 50%,
400px 0,
500px 50%,
600px 0,
700px 50%,
800px 0,
90% 100%,
50% 60%,
10% 100%);
stroke: red;
stroke-width: 20px;
fill: blue;
}
#polygon-transform {
width: 600px;
height: 600px;
clip-path: polygon(0 0,
100px 50%,
200px 0,
300px 50%,
400px 0,
500px 50%,
600px 0,
700px 50%,
800px 0,
90% 100%,
50% 60%,
10% 100%);
}
</style>
<div class="wrapper" id="polygon"></div>
<div class="wrapper" id="circle"></div>
<div class="wrapper" id="circle-without-position"></div>
<div class="wrapper" id="ellipse"></div>
<div class="wrapper" id="ellipse-padding-box"></div>
<div class="wrapper" id="inset"></div>
<div class="wrapper" id="polygon-transform"></div>
<svg class="svg">
<rect id="rect" x="10" y="10" width="700" height="700"></rect>
</svg>