css - CSS でのラウンド リストの作成 (ラウンド メニューバー用)

Question

誰かが私を助けてくれることを本当に願っています。CSS で丸いメニューバーを作成しようとしていますが、解決策を検索して検索しましたが、何も見つかりませんでした。（半径を設定して）丸い領域を作成する方法を知っており、<ul>&を使用して単純な直線メニューを作成する方法を知っています<li>が、言ったように、丸いものを作成したいと思います。

私が働きたいと思っているものに似たものの写真があります：

誰かがこれについて私を助けることができれば、私はとても感謝しています.

Answer 1

私が知っている最も近いものは次のとおりです。

http://www.cssplay.co.uk/menus/cssplay-round-and-round.html

http://codepen.io/tgrant54/pen/lBHwK

それはあなたが求めているものですか？

Answer 2

これは、純粋な CSS で本当にやりたいことではありません。

を使用して円形を作成できる場合がありborder-radiusますが、実際には円形のオブジェクトを作成しているわけではありません。ブラウザに関する限り、角が丸くなっているだけで、通常のボックス形状のままです。これは、CSS で円や曲線を処理する他の機能にはまったく関係ありません。

はい、すべてのキャラクターを独自の要素に配置し、それぞれを特定の位置でスタイリングすることで、あなたが求めている線に沿って何かを行うことは可能ですが、それは苦痛で柔軟性がなく、作業が困難になるでしょう. あなたが本当にこれをやりたいなら、ここで試すことができるコードジェネレーターがありますが、あなたは間違ったツリーを吠えていると思います.

この種のことを適切に行いたい場合、実際に考える必要があるのは、Canvas または SVG のいずれかを使用して、さらに多くの JavaScript コードを使用して、グラフィカルな形式で行うことです。

これについては、Raphael のような JS ライブラリを調べることをお勧めします。すでに Raphael を使用して同様のことを試している人がいます。参考になるかもしれません。たとえば、ここを参照してください: Raphael JS を使用したラジアル パイ メニュー

それが役立つことを願っています。