JSFiddle - React, Tailwind, and code Playground

by tomasjurman

HTML

<div class="element clip-circle"></div>	
<div class="element clip-rect"></div> 
<div class="element clip-ellipse"></div>
<div class="element clip-polygon"></div>

CSS

.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%); 
}