css绘制如图的圆弧：
这种矩形+弧形的效果中，弧形的效果一般是由一条曲线拉伸出来的，这条曲线往往是属于一个椭圆的，所以可以绘制一个椭圆，截取部分可视区域实现效果。
<style>
.wrapper{
width: 400px;
height: 600px;
border: 2px solid saddlebrown;
position: relative;
overflow: hidden;
}
.arc-continer{
width: 100%;
/* 高度设置为 圆弧形状整体高度 */
height: 259px;
background-color: transparent;
position: relative;
}
/* 绘制椭圆 :长半轴为容器宽度*2左右,短半轴为容器宽度*1 左右 -- 可以根据需要进行微调*/
.arc-continer::after{
content: '';
width: 200%;
height:400px;
background-color: aqua;
position: absolute;
/* 绘制为椭圆 */
border-radius: 100% /100%;
/* top 为 椭圆高度 - arc-continer高度*/
top: -141px;
left: 50%;
transform: translateX(-50%);
}
</style>
</head>
<body>
<div class="wrapper" id="wrap">
<div class="arc-continer" id="continer">
</div>
</div>
</body>
