css3에서이 버튼을 어떻게 디자인합니까?

Question

이 버튼처럼 디자인하고 싶습니다. 테두리 반경으로 50 %를 만들었지 만이 그림에서와 같이 하단 부분을 어떻게 확장 할 수 있습니까?

.list{ 
 
height: 280px; 
 
width: 220px; 
 
position: relative; 
 
background: gray; 
 
border-bottom: 3px solid darkblue 
 
} 
 
#open{ 
 
    position: absolute; 
 
    left: 50%; 
 
    bottom: 0; 
 
    width: 50px; 
 
    margin-left: -22px; 
 
    height: 50px; 
 
    border-top-left-radius: 50%; 
 
    border-top-right-radius: 50%; 
 
    background: darkblue; 
 
    color: white; 
 
} 
 
button{ 
 
    border: none; 
 
    background: transparent; 
 
    outline: none; 
 
    cursor: pointer; 
 
}

<div class='list'> 
 
<button id='open'>+</button> 
 
</div>

bF.jpg

Answer 1

당신이 유일한 해결책 CSS를 원하는 경우, 당신은 마스크를 사용할 수 있습니다 ...하지만 그들은 IE/에지에서 지원하지 않는

.list{ 
 
height: 280px; 
 
width: 220px; 
 
position: relative; 
 
background: gray; 
 
border-bottom: 3px solid darkblue 
 
} 
 
#open{ 
 
    position: absolute; 
 
    left: 50%; 
 
    bottom: 0; 
 
    width: 50px; 
 
    margin-left: -22px; 
 
    height: 50px; 
 
    border-top-left-radius: 50%; 
 
    border-top-right-radius: 50%; 
 
    background: darkblue; 
 
    color: white; 
 
} 
 

 
#open:before { 
 
    content: ' '; 
 
    background: red; 
 
    width: 30px; 
 
    height: 35px; 
 
    left: -30px; 
 
    position: absolute; 
 
    -webkit-mask-image: radial-gradient(circle 10px at 0 0, transparent 0, transparent 30px, black 31px); 
 
} 
 

 
#open:after { 
 
    content: ' '; 
 
    background: red; 
 
    width: 30px; 
 
    height: 35px; 
 
    left: 50px; 
 
    position: absolute; 
 
    -webkit-mask-image: radial-gradient(circle 10px at 30px 0, transparent 0, transparent 30px, black 31px); 
 
} 
 

 
button{ 
 
    border: none; 
 
    background: transparent; 
 
    outline: none; 
 
    cursor: pointer; 
 
}

<div class='list'> 
 
<button id='open'>+</button> 
 
</div>