<div class="element clip-circle"></div> <div class="element clip-rect"></div> <div class="element clip-ellipse"></div> <div class="element clip-polygon"></div>
.element{ width:200px; height:200px; background:#999; float:left; } .clip-rect { -webkit-clip-path: inset(50px 50px 50px 50px); } .clip-circle { -webkit-clip-path: circle(60px at center); } .clip-ellipse { -webkit-clip-path: ellipse(80px 50px at 100px 100px); } .clip-polygon { -webkit-clip-path:polygon(5% 5%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%); }