css - この進行状況バーのように見えるように div または li のスタイルを設定する方法は?

Question

これが何と呼ばれているのかわからないので、この質問にうまくタイトルを付けることができませんでした。私がやりたいのは、次のように、プロセスのどのステップが完了したかを示すバーを作成することです。

この種の効果を行う方法がわかりません。また、それが何と呼ばれているのかわからないため、例や何かを見つけることができませんでした。

上の画像のようなものを作るにはどうすればよいですか？

Answer 1

スタイリングを始めるのに適した場所は次のとおりです: http://css3button.net/81334

あなたが見ているのは：

• 背景の CSS グラデーション: http://css-tricks.com/css3-gradients/

• text-テキストの影

• ライト ディテールのインセットに設定されたボックス シャドウ

• そしておそらく、ポイントのかなり高度な:beforeおよび:afterスタイル: http://css-tricks.com/bubble-point-tooltips-with-css3-jquery/

Answer 2

と呼ばれProgress Trackers、ナビゲーションに似ていますBreadcrumbが、動作と用途が異なります。

例と両者の違いについては、次のリンクを参照してください。

純粋な css でプログレス トラッカーを作成するには、次のチュートリアルを参照してください。