Html 如何使用CSS3创建此圆弧？

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

图像应为方形图像

提前谢谢

编辑：

我尝试了很多，这不仅仅是常规的CSS

我已经在谷歌上搜索过“Arc”或任何类似的关键词

这是完整的图像：

---

问题是，它应该伸展到全宽。我试着将它实现为一个图像，但是当你将图像的大小调整到1400px以上时，图像会变得丑陋，如果我能用CSS解决这个问题，那就太棒了。

好吧，正如评论所说，它非常简单

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

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

---

你完了

试过什么吗？请输入密码。答案是这样的。你能提供一个来源吗？为什么每个人都使用SO作为搜索引擎，但实际上没有使用内部搜索引擎？复制到至少500个搜索结果：Hi Ricardo。谢谢你的帖子。问题是，现在图像的顶部也被剪掉了。我试着修复它，但我不是CSS3边界的英雄。是否可以禁用左上角和右上角边框？

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