html - リング型div

Question

実はここに2つの質問があります。できる限り説明します。

リング状のdivを作成しようとしています。以下はそれがどのように見えるべきかです。

これは私がこれまでに行ったことです。左下隅から上に向かってわずかな曲線を描くにはどうすればよいですか？そして、どうすれば右側の逆曲線を作成できますか？

ありがとうございました。

Answer 1

画像の見たくない部分を白くする2番目の円を追加することができます。

たとえば、idcutoutを使用して2番目のdiv（最初のdiv内）を追加し、次のようにスタイルを設定した場合：

#cutout {
    top:250px;
    border-radius: 700px;
    border:300px solid #eee;
    z-index:1;
    left:200px;
    height:200px;
    position:absolute;
}

それからあなたのイメージであなたはあなたが望むものに少し近づくでしょう。また、コンテナdivに追加position: relativeして、それが配置およびクリップされていることを確認することもできます。

最後に、画像に示されているようにリングセグメントをクリップする場合は、最も内側の2つをクリップするためだけに外側のdivを追加する必要があります。画像を放射状の背景に置き換える必要があります。

これはおおよそ次のようになります：http：//dabblet.com/gist/457188 ​​2

画像：

正直なところ、このようなゆがみがうまく機能するかどうかはわかりません。通常、希望する結果が正確に得られないため、古いブラウザではうまく機能しない可能性があります。また、これらのCSSプロパティの新しいバージョンを実装する新しいブラウザでは必ずしも問題になりません。

Answer 2

新しいdivを作成して追加してみてください

border-top-right-radius: XXX

反転セグメントの場合。それらが正しく浮いていることを確認します（例float:left）。