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和一些溢出，这样您就可以依赖伪元素。

＆＃13;

＆＃13;

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

＆＃13;

<div class="header">

</div>

＆＃13;

＆＃13;

＆＃13;

或使用radial-gradient：

＆＃13;

＆＃13;

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

＆＃13;

<div class="header-1">

</div>

<div class="header-2">

</div>

＆＃13;

＆＃13;

＆＃13;

或clip-path：

＆＃13;

＆＃13;

.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%);
}

＆＃13;

<div class="header">

</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

这是一个对我有用的解决方案

.container{
  position:relative;
  width:100%;
  height:100px;
  text-align:center;
  overflow:hidden;
  z-index:2;
}
.header{
  height:60px;
  position:absolute;
  top:0;
  bottom:0;
  left:-20px;
  right:-20px;
  background-color: green;
  border-bottom-right-radius:100%;
  border-bottom-left-radius:100%;
  padding:10px;
  box-shadow: 5px 15px 10px grey;
}

<div class="container">
  <div class="header">
    this is the header
  </div>
</div>

Answer 3

借助 clip-path ，我们可以获得此输出

.first-div{
background:#007dbf;
height:400px;
clip-path: ellipse(70% 49% at 50% 30%);
}

<div class="first-div"></div>