How to create a curve as shown below for the div

Question

I have a problem when creating a div above the circle as shown below!

I have set up like this

CSS:

.count-select {
    box-shadow: 0 -5px 10px -5px rgba(0,0,0,.8);
    border-top: 2px solid #E75532;
    height: auto;
    width: 100%;
    background: #fff;
    position: fixed;
    bottom: 0;
    padding: 12px;
    border-radius: 50%/100px 100px 0 0;
}

As a result, it is not like the design, expect people to help.

Thank you!

Answer 1

You can make the element to overflow by adding negative values to left/right. then add some padding to avoid content overflow like this :

.container {
  width: 200px;
  border: 1px solid blue;
  height: 200px;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
}

.count-select {
  box-shadow: 0 -5px 10px -5px rgba(0, 0, 0, .8);
  border-top: 2px solid #E75532;
  height: 50px;
  background: #fff;
  position: absolute;
  bottom: 0;
  left: -30px;
  right: -30px;
  padding: 12px 30px;
  border-radius: 50%;
  text-align:center;
}

<div class="container">
  <div class="count-select ">
    select items
  </div>
</div>

Answer 2

If you divide it into two divs instead of one, you can control to how far the border radius should go. See example below.

body {
  background: lightgoldenrodyellow;
}

.top {
  background: white;
  border-top: 2px solid red;
  border-top-left-radius: 50%;
  border-top-right-radius: 50%;
  height: 100px;
  width: 400px;
  text-align: center;
  box-shadow: 0px -3px 10px rgba(0,0,0,0.3);
}

.middle {
  background: white;
  width: 400px;
  height: 100px;
  text-align: center;
  margin: 0;
}

<div class="container">
<div class="top">
  <p>Select items and swipe up</p>
</div>
<div class="middle">
0 items selected
</div>
</div>