Wie man diesen Knopf in css3 gestaltet?

Question

ich möchte so aussehen wie diese taste, ich habe 50% davon mit border-radius gemacht, aber wie kann ich den unteren teil genauso erweitern wie auf diesem bild?, Irgendein Trick?

.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

, wenn Sie eine CSS einzige Lösung wollen, können Sie Masken verwenden ... aber sie sind nicht in IE/Rand unterstützt

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