CSS transparent curved shape with two rounded sides
Here is an idea using radial-gradient .box { margin-top:120px; width:200px; height:100px; background:white; } .box .top { height:100px; width:150px; transform:translateY(-100%); position:relative; background:#fff; } .top:before, .top:after{ content:””; position:absolute; top:0; width:50px; left:100%; bottom:50%; background: radial-gradient(100% 50% at top left, #fff 98%,transparent 100%) right, radial-gradient(100% 50% at bottom right, transparent 98%,#fff 100%) left; background-size:50% 100%; background-repeat:no-repeat; } .top:after { … Read more