我不明白获得 div 的更大圆角底部边框的公式，以及是否有更简单的方法在 Bootstrap 中实现它。
现在是这样的：
以及我想如何开发它：
.header {
background-color: blue;
height: 40px;
width: 90px;
border-bottom-left-radius: 180px;
border-bottom-right-radius: 180px;
border-bottom: 0;
}
<div class="header">
</div>
您可以使用border-radius还有一些overflow，因此您可以依赖伪元素。
.header {
position: relative;
height: 40px;
width: 90px;
overflow:hidden;
}
.header:before {
content: "";
position:absolute;
top:0;
bottom:0;
left:-10px;
right:-10px;
background-color: blue;
border-bottom-left-radius: 50%;
border-bottom-right-radius: 50%;
border-bottom: 0;
}
<div class="header">
</div>
Or use radial-gradient:
.header-1 {
position: relative;
height: 40px;
width: 90px;
overflow: hidden;
background: radial-gradient(circle at top, blue 50%, transparent 51%) center/200% 250% no-repeat;
}
.header-2 {
position: relative;
height: 40px;
width: 90px;
overflow: hidden;
background: radial-gradient(ellipse at center, blue 50%, transparent 53%) 50% 100%/170% 150% no-repeat;
}
<div class="header-1">
</div>
<div class="header-2">
</div>
Or also clip-path:
.header {
height: 20px;
width: 90px;
position: relative;
background-color: blue;
}
.header:before {
content: "";
position: absolute;
bottom: -15px;
height: 30px;
left: 0;
right: 0;
background-color: blue;
-webkit-clip-path: ellipse(60% 50% at 50% 50%);
clip-path: ellipse(60% 50% at 50% 50%);
}
<div class="header">
</div>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
