div에 대해 다음과 같이 커브를 만드는 방법

Question

아래와 같이 원 위에 div를 만들 때 문제가 있습니다!

가 I이

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; 
} 

이 결과,이 디자인을 좋아하지 않는 사람들이 도움을 기대합니다.

감사합니다!

Answer 1

왼쪽/오른쪽에 음수 값을 추가하여 요소를 오버플로 할 수 있습니다. 다음과 같은 내용 오버 플로우를 방지하기 위해 약간의 패딩을 추가

당신이 하나가 아닌 두 개의 div의로 나누면

.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

, 당신은 국경 반경이 가야 얼마나 멀리로 제어 할 수 있습니다. 아래 예를 참조하십시오.

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>

의