Create curved background with box-shadow

Question

I tried to create this curve background with html and css but I got problem with adding box-Shadow to the div

so I create it with a div and before / after

and the result is that:

.background::before {
  content: '';
  position: absolute;
  top: -2.2rem;
  border-radius: 50%;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  height: 10%;
  background: #fff;
}
.background{
  position: relative;
  background: #0b2864;
  width:100%;
  height:30rem;
  border-radius: 1.5rem;
}
.background::after {
  content: '';
  position: absolute;
  bottom:-2.2rem;
  border-radius: 50%;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  height: 10%;
  background: #fff;
}

BTW my question is different than this question How to create a squeezed box using only css I want to add box-shadow to my div not just create it
and I need it to be html css not svg. for responsivity

Create curved background with box-shadow

0 Answers