html - この円弧を CSS3 で作成するには?

Question

CSS3 でこの形状を作成する最良の方法は何ですか?

画像は正方形の画像である必要があります。

前もって感謝します。

編集：

私はたくさん試しましたが、これは単なる通常の CSS ではありません。

私はすでに「Arc」または同様のキーワードでグーグル検索を試みました。

これは完全な画像です：

問題は、全幅に伸びる必要があるということです。画像として実装してみたのですが、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;
}

そして、あなたは完了です！例