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

Question

(www.sf.gg) は、中国を代表する開発者テクノロジー コミュニティです。私たちは、プログラミング愛好家に純粋で高品質な技術交流プラットフォームを提供し、開発者と一緒に学び、コミュニケーションし、成長し、開発者の時代を作りたいと考えています。

为情所困 · Answer

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

PHP中文网 · Answer

リーリー

巴扎黑 · Answer

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

習慣沉默 · Answer

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

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

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

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

デモ-新機能

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

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

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

デモ