如何用CSS3创建这个弧？

Question

在CSS3中创建此形状的最佳方法是什么？

图像应为方形图像。

提前致谢。

编辑：

我尝试了很多，这不仅仅是普通的CSS。

我已经尝试在'Arc'或任何类似的关键字上进行Google搜索。

这是完整图片：

事实是，它应该伸展到全宽。我尝试将它作为一个图像来实现，但是当你调整大小超过1400px时，图像变得很难看，如果我能用CSS解决这个问题会很棒。

Answer 1

嗯，正如评论一样，这很简单！

如果你使用这样的HTML结构：

<div class="arcborder">
  <img src=""/>
  <div class="colorborder"></div>
</div>

然后你可以用这种方式管理css：

.arcborder{
width:800px;
height:450px;
overflow:hidden;
border-radius:600px/80px;
}
.effectborder img{
margin-top:30px;
width:800px;
height:400px;
border-radius:600px/40px;
}

你完成了！ Example