html - この種のグラフィックを css3 で記述する方法

Question

Answer 1

CSS3には面取りという作業があります

Answer 2

リーリー

Answer 3

簡単に言えば、円形の p 要素の境界半径とパッケージのオーバーフローを通じてこれを実現する必要があります。濃いオレンジ色は影になるはずです。

Answer 4

本当に申し訳ありません、私はいつもFirefoxを使用していましたが、radial-gradientとChromeで異なるとは予想していませんでした。それは私がよく理解していないからでもあります。

以下のリンクを再度修正しました。

================

CSS3 変数を使用して半径サイズを制御する、これより簡単な方法は今のところ思いつきません
下位互換性がないようにする道はどんどん進んでいきます...

デモ-新機能

====================================

詳しくはデモをご覧ください。追加のタグを追加していない純粋な CSS3 実装です。拡張性は高くないと感じますが、今後も改善を続ければ実用化できるはずです。

CSS3 にはさらに多くの魔法があり、より深く考えると、多くの興味深い機能が思いつきます。まさに「CSS Revealed」の著者と同じです。

デモ