html - cssだけで丸パンくずリストを作る方法

Question

上記を実装するために利用可能な css3 ソリューションを見た人はいますか? 私は画像を必要としない方法を見つけたいと思っています。既存のソリューションを知っている人はいますか? ありがとう

Answer 1

CSS3のborder-radiusプロパティを使用すると非常に簡単です。

ライブデモ

CSS3 アニメ + jQuery を少し使ったライブデモ

HTML

  <span class="btnz">
    <span class="active"></span>
    <span></span>
    <span></span>
    <span></span>
  </span>

CSS:

.btnz>span{
  display:inline-block;
  width:10px;
  height:10px;
  background:#C0CCD7;
  border-radius:7px;
  border:1px solid #C0CCD7;
  border-top:1px solid #9DA7AF;
  margin:0 3px;
}
.btnz>span.active{
  background: #63C000;
  border: 1px solid #5FAF0E;
  border-bottom: 1px solid #39660F;
}

詳細はこちら: https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius

Answer 2

申し訳ありませんが、提案する既製の実装はありません。しかし、最新のブラウザーで実現するのはそれほど難しくありません。

ドットごとに <div> (または任意の要素、おそらくリンク <a>) を作成します。

丸くするには: を使用しますborder-radius。丸みを帯びた角の半径をdivの高さ/幅の半分にすることで、円が得られます。

上部 (非アクティブ時) または下部 (アクティブ時) の 3D 照明効果は、box-shadow: inset ....

私があなたの画像から見たものから、正しい色を選んでください。

Answer 3

キャンバス。

https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial

キャンバス キャンバス キャンバス キャンバス キャンバス キャンバス。

編集：OK、すべての反対票の後、ここに別の答えがあります.... SVG。:D

EDIT EDIT: テキストのないインライン リスト要素はどうですか?

EDIT EDIT EDIT: 真剣に、border-radius はかなり良い方法です。