CODEWITHSUNDEEP
htmlcss
Smokey Dawson
Smokey Dawson

Reputation: 9240

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

I've recreated this

enter image description here

.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

Upvotes: 1

Views: 640

Answers (1)

Temani Afif
Temani Afif

Reputation: 273750

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>

Upvotes: 2

Related Questions