如何使一个圆面包屑只有css [英] How to make a circle breadcrumb with only css

问题描述

>

有人看到一个可用的css3解决方案来实现上面的？我想找一种方式，而不需要图像，也不会重写的东西，其他人可能已经解决好了。任何人都知道任何现有的解决方案？感谢

Has anyone seen a available css3 solution to implement the above? I'd like to find a way without requiring images and also not rewrite something that others have likely already solved well. Anyone know of any existing solutions? Thanks

推荐答案

非常简单使用 CSS3 code>属性：

Quite simple using CSS3's border-radius property:

LIVE DEMO < a>

带有一点CSS3动画+ jQuery的实时演示

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

这篇关于如何使一个圆面包屑只有css的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！