html - 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>