html - 如何仅使用 css 制作圆形面包屑

Question

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

Answer 1

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

现场演示

带有一点 CSS3 动画 + jQuery 的 LIVE DEMO

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

帆布 帆布 帆布 帆布。

编辑：好的，在所有的反对意见之后，这是一个替代答案....SVG。:D

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

编辑 编辑 编辑：说真的，边界半径是一个很好的方法。