我想设计这样的按钮,我用 border-radius 做了 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
最佳答案
如果你想要一个只有 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>
关于html - 如何在css3中设计这样的按钮?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46521095/