如何在css3中设计这样的按钮？答案

【问题标题】：How to design like this button in css3?如何在css3中设计这样的按钮？
【发布时间】：2017-10-11 20:00:13
【问题描述】：

我想设计这样的按钮，我用边框半径做了 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

【问题讨论】：

使用 SVG 怎么样？
我认为它是由 Css3 制作的，前后有 :D 是由 SVG 制作的吗？ :)
Svg 很难制作，但您可以制作任何形状。如果你有你看到的网页放在这里，让我看看是用来做什么的。
这实际上是我在搜索时在谷歌图片中看到的 gif 图片，我认为它是关于移动应用程序的，无论如何感谢您的帮助:)

标签： html css button css-shapes

【解决方案1】：

如果你想要一个仅 css 的解决方案，你可以使用掩码...但 IE/Edge 不支持它们

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

【讨论】：

你太棒了，节省了我的时间：D
很高兴能提供帮助:)