如何用css制作圆形面包屑

Question

有没有人见过可用的css3解决方案来实现上述功能？我想找到一种不需要图像的方法，也不会重写其他人可能已经很好解决的问题。有人知道任何现有的解决方案？感谢

Answer 1

使用 CSS3 的border-radius属性非常简单：

<强> LIVE DEMO

<强> LIVE DEMO with a bit of CSS3 anim + 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

抱歉，我没有现成的实施建议。但在现代浏览器上实现它应该不会太难。

只创建一个＆lt; div＆gt; （或任何元素，可能是每个点的链接＆lt; a＆gt;）。

要使其成为圆形：使用border-radius。通过使圆角半径为div的高度/宽度的一半，您将获得一个圆圈。

可以使用box-shadow: inset ...非常简单地模拟顶部（处于非活动状态）或底部（处于活动状态）3D照明效果。

从我在你的图片中看到的，选择正确的颜色就是这样，非常多。

Answer 3

画布。

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

Canvas帆布画布帆布画布。

编辑：好的，在所有的投票之后，这里是另一个答案...... SVG。 ：d

编辑编辑：没有文字的内联列表元素怎么样？

编辑编辑：严重的是，border-radius是一个很好的方法。