Is there a better way to create convex / concave borders on an element

Question

I've recreated this

 .container { display: flex; flex-direction: column; background: rgb(167, 180, 182); width: 202px; }.top { width: 200px; height: 100px; background: rgb(167, 180, 182); border-radius: 0 0 28px 0; position: relative; z-index: 10; filter: drop-shadow(0px 4px 9px rgba(87, 101, 104, 0.4)); }.bottom { width: 200px; height: 100px; background: rgb(167, 180, 182); position: relative; }.rounded-bottom { overflow: hidden; position: absolute; bottom: -30px; left: 0; width: 30px; height: 30px; }.rounded-bottom__in { width: 60px; height: 60px; border-radius: 100%; box-shadow: 0 0 0 500px rgb(167, 180, 182); }

 <div class="container"> <div class="top"> <div class="rounded-bottom"> <div class="rounded-bottom__in"></div> </div> </div> <div class="bottom"></div> </div>

now this works, I'm just wondering if there is a better way to do this.

Any help would be appreciated

Answer 1

Border radius, radial gradient and a filter can do it:

 .box { width:200px; height:200px; background:#9baaad; position:relative; border-bottom-right-radius:50px; /* convexe part */ filter:drop-shadow(0px 3px 3px grey); /* shadow */ } /* concave part */.box::before{ content:""; position:absolute; top:100%; right:0; left:0; height:50px; background: radial-gradient(farthest-side at bottom right,transparent 98%,#9baaad 100%) 0/50px no-repeat; }

 <div class="box"> </div>