書き換えられたタイトルは次のとおりです: CSS 3 図形: 「Reverse Circle」または「Cut Circle」

Question

「反円」と表現される形状を作成したいと考えています。

黒い線が div 要素の外側の境界線に沿って続いているはずなので、画像は多少不正確です。

これは私が現在持っているデモです: http://jsfiddle.net/n9fTF/

画像なしで CSS を使用することはできますか?

Answer 1

プロットからは、点をどの程度丸くしたいのかはわかりませんが、可能性が 1 つあります。 http://jsfiddle.net/n9fTF/6/

先端をもっと丸くする必要がある場合は、スプーンと調和するように先端にいくつかの円を配置する必要があります。

Answer 2

更新: CSS3 放射状背景グラデーション オプション

(これをサポートするブラウザ - FF および Chrome - IE10 でテスト済み - Safari も動作するはずです)。

私の最初の答えの「問題」の 1 つは、しっかりした背景がない状況でした。この更新により、同じ効果が作成され、円とその逆のカットアウトの間に透明な「ギャップ」が可能になります。

フィドルの例を表示します。

CSS

リーリー

元の回答

Z インデックスを適切に機能させるには予想よりも多くの労力がかかりました ( これは負の Z インデックスを無視しているようです )、ただし これにより、見た目がきれいになりました。 (IE9、FF、Chrome でテスト済み):

HTML

リーリー

CSS

リーリー