如何用CSS绘制曲线

Question

我想使用仅限CSS 创建附在此帖子下方的相同标题，您有任何解决方案吗？
我使用椭圆边框半径，但它不像我想要的图片。

body{
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}
*{
  margin: 0;
	padding: 0;
	outline: 0;
	border: none;
}

.header{
  background-color: #3654cd;
	width: 100%;
	min-height: 200px;
	border-radius: 0 0 50% 50%;
}

<div class="header">
</div>

Answer 1

您可以使用border-bottom半径进行操作。像这样：

div{
    background-color:blue;
    width:500px;
    height:90px;
    border-bottom-left-radius:50%;
    border-bottom-right-radius:50%;
}

<div></div>

Answer 2

我能找到的最好的事情是制作2个div课程。第一个是标题文本，第二个是圆角div（或椭圆），它将重叠并使其在底部呈圆形。这将是HTML代码：

<div class="header">
&nbsp;
</div>
<div class="round">
&nbsp;
</div>

CSS：

.header, .round {background: #00f; width: 100%;}
.round{border-radius: 50%; margin-top: -10px;}