html - 如何用 CSS3 创建这个弧？

Question

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

图像应该是方形图像。

提前致谢。

编辑：

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

我已经尝试过搜索“Arc”或任何类似的关键字。

这是完整的图像：

事情是，它应该伸展到全宽。我尝试将其实现为图像，但是当您调整超过 1400 像素的大小时，图像变得丑陋，如果我可以仅使用 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;
}

你完成了！例子