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>