html - 带有圆 Angular 边框的 div

Question

我不明白为我的 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>

Answer 1

您可以使用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>

或者使用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>

或者剪辑路径:

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