CSS 创建由线连接的 CSS3 圆圈

Question

提问by HGandhi

I have to implement the following circle and line combination in CSS and I am looking for pointers on how to implement this effectively. The circles and lines should look like this:

我必须在 CSS 中实现以下圆和线组合，我正在寻找有关如何有效实现这一点的指针。圆圈和线条应如下所示：

Ideal image prototype

理想图像原型

I am able to implement the circles as such:

我能够实现这样的圈子：

span.step {
  background: #ccc;
  border-radius: 0.8em;
  -moz-border-radius: 0.8em;
  -webkit-border-radius: 0.8em;
  color: #1f79cd;
  display: inline-block;
  font-weight: bold;
  line-height: 1.6em;
  margin-right: 5px;
  text-align: center;
  width: 1.6em; 
}

but the lines are tricky for me to understand.

但线条对我来说很难理解。

The size of the circle changes depending on whether it is the active step or not, and the color of the line connecting the circles changes as well depending on status. How would I accomplish this?

圆圈的大小根据是否为活动步骤而变化，连接圆圈的线的颜色也根据状态而变化。我将如何做到这一点？

Answer 1

回答by bookcasey

You can achieve this effect with no additional markup using pseudo-elements and the adjacent sibling selector (~):

您可以使用伪元素和相邻的同级选择器 ( ~)在没有额外标记的情况下实现这种效果：

css3 circles connected by lines

由线连接的 css3 圆圈

li {
  width: 2em;
  height: 2em;
  text-align: center;
  line-height: 2em;
  border-radius: 1em;
  background: dodgerblue;
  margin: 0 1em;
  display: inline-block;
  color: white;
  position: relative;
}

li::before{
  content: '';
  position: absolute;
  top: .9em;
  left: -4em;
  width: 4em;
  height: .2em;
  background: dodgerblue;
  z-index: -1;
}


li:first-child::before {
  display: none;
}

.active {
  background: dodgerblue;
}

.active ~ li {
  background: lightblue;
}

.active ~ li::before {
  background: lightblue;
}

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li class="active">4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
</ul>

Demo on CodePen

CodePen 上的演示

Answer 2

回答by ccondrup

Working off of the excellent answer from@bookcasey I found myself doing it the opposite way to get it responsive;

从@bookcasey的优秀答案中，我发现自己用相反的方式来让它响应；

I put the circles as ::beforepseudo selectors (with automatic css counter).
The lines between are the lielements so they can be stretched by flexbox.

我把圆圈作为::before伪选择器（带有自动 css 计数器）。
之间的线是li元素，因此它们可以被 flexbox 拉伸。

It now stretches to fill parent, and deals with different number of steps automatically. You can also do things like adjust font-sizeon parent uland have the whole thing adapt.

它现在拉伸以填充父级，并自动处理不同数量的步骤。你也可以做一些事情，比如调整font-size父母ul，让整个事情适应。

I'm sure it can be improved so feel free to contribute :)

我相信它可以改进，所以请随时贡献:)

Interactive CodePen: Flexbox Timeline with steps: http://codepen.io/ccondrup/pen/bqbGWB?editors=1100

交互式 CodePen：包含步骤的 Flexbox 时间线：http://codepen.io/ccondrup/pen/bqbGWB?editors=1100

ul {
  align-content: center;
  align-items: center;
  counter-reset: stepCount;
  display: flex;
  justify-content: space-around;
  margin: 10vh auto 20vh;  /* for codepen */
}

li {
  background: dodgerblue;
  color: white;
  content: ' ';
  display: flex;
  flex-grow: 1;
  height: .3em;
  line-height: 1em;
  margin: 0;
  position: relative;
  text-align: right;
  z-index: -1;
}

li::before {
  background: dodgerblue;
  border-radius: 50%;
  color: white;
  content: counter(stepCount);
  counter-increment: stepCount;
  height: 2em;
  left: -2em;
  line-height: 2em;
  position: absolute;
  text-align: center;
  top: -.85em;
  width: 2em;
}

li.active {
  background-color: lightblue;
}

li.active~li {
  background-color: lightblue;
}

li.active~li::before {
  background-color: lightblue;
}

li:last-child {
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: 0;
/* Shorthand: flex: 0 1 0; */
}

ul.bigger {
  font-size: 1.3em;
}

ul.highlight-active li.active::before {
  font-size: 1.6em;
  background: navy;
}

ul.roman li::before {
  content: counter(stepCount, upper-roman);
}

ul.triangle li::before {
  width: 0;
  height: 0;
  border-radius: 0;
  border-left: 1em solid white;
  border-right: 1em solid white;
  border-bottom: .8em solid dodgerblue;
  content: '';
  top: -.65em;
}

ul.triangle li:first-child::before {
  left: 0;
}

ul.triangle li.active~li::before {
  border-bottom-color: lightblue;
}

<ul>
  <li></li>
  <li></li>
  <li class="active"></li>
  <li></li>
  <li></li>
  <li></li>
</ul>


<ul class="bigger highlight-active">
  <li></li>
  <li></li>
  <li class="active"></li>
  <li></li>
</ul>


<ul class="roman">
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li class="active"></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>


<ul class="triangle">
  <li></li>
  <li></li>
  <li class="active"></li>
  <li></li>
  <li></li>
</ul>

Answer 3

回答by Jhonatan Acelas Arevalo

It is not my own but it works quite well and looks elegant, only works with css and you can perzonalize it more. Source http://jsfiddle.net/Misiu/y1Lo3qh1/

它不是我自己的，但它工作得很好，看起来很优雅，只适用于 css，你可以更多地对其进行个性化。来源http://jsfiddle.net/Misiu/y1Lo3qh1/

var i = 1;
$('.progress .circle').removeClass().addClass('circle');
$('.progress .bar').removeClass().addClass('bar');
setInterval(function () {
    $('.progress .circle:nth-of-type(' + i + ')').addClass('active');
    $('.progress .circle:nth-of-type(' + (i - 1) + ')').removeClass('active').addClass('done');
    $('.progress .circle:nth-of-type(' + (i - 1) + ') .label').html('&#10003;');
    $('.progress .bar:nth-of-type(' + (i - 1) + ')').addClass('active');
    $('.progress .bar:nth-of-type(' + (i - 2) + ')').removeClass('active').addClass('done');
    i++;
    if (i == 8) {
        $('.progress .circle').removeClass().addClass('circle');
        $('.progress .bar').removeClass().addClass('bar');
        i = 1;
    }
}, 1000);

*,
*:after,
*:before {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Open Sans";
}
/* Form Progress */

.progress {

  margin: 20px auto;
  text-align: center;
  padding-bottom: 80px;
}
.progress .circle,
.progress .bar {
  display: inline-block;
  background: #fff;
  width: 40px;
  height: 40px;
  border-radius: 40px;
  border: 1px solid #d5d5da;
  vertical-align:top;
}
.progress .bar {
  position: relative;
  width: 80px;
  height: 6px;
  margin: 0 -5px 17px -5px;
  border-left: none;
  border-right: none;
  border-radius: 0;
  top:16px;
  vertical-align:top
}
.progress .circle .label {
  display: inline-block;
  width: 32px;
  height: 32px;
  line-height: 32px;
  border-radius: 32px;
  margin-top: 3px;
  color: #b5b5ba;
  font-size: 17px;
}
.progress .circle .title {
  color: #b5b5ba;
  font-size: 13px;
  line-height: 18px;
  margin-left: -30px;
  display: block;
  width: 100px;
  margin-top: 5px;
}
/* Done / Active */

.progress .bar.done,
.progress .circle.done {
  background: #eee;
}
.progress .bar.active {
  background: linear-gradient(to right, #EEE 40%, #FFF 60%);
}
.progress .circle.done .label {
  color: #FFF;
  background: #8bc435;
  box-shadow: inset 0 0 2px rgba(0, 0, 0, .2);
}
.progress .circle.done .title {
  color: #444;
}
.progress .circle.active .label {
  color: #FFF;
  background: #0c95be;
  box-shadow: inset 0 0 2px rgba(0, 0, 0, .2);
}
.progress .circle.active .title {
  color: #0c95be;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<div class="progress">
  <div class="circle done"> <span class="label">1</span>
    <span class="title">Order</span>

  </div> <span class="bar done"></span>

  <div class="circle done"> <span class="label">2</span>
    <span class="title">Address</span>

  </div> <span class="bar active"></span>

  <div class="circle active"> <span class="label">3</span>
    <span class="title">Payment</span>

  </div> <span class="bar"></span>

  <div class="circle"> <span class="label">4</span>
    <span class="title">Review</span>

  </div> <span class="bar"></span>

  <div class="circle"> <span class="label">5</span>
    <span class="title">Finish</span>

  </div>
</div>
<div class="progress">
  <div class="circle done"> <span class="label">1</span>
    <span class="title">Order informations</span>

  </div> <span class="bar active"></span>

  <div class="circle active"> <span class="label">2</span>
    <span class="title">Order review</span>

  </div> <span class="bar"></span>

  <div class="circle"> <span class="label">3</span>
    <span class="title">Finish</span>

  </div>
</div>

Answer 4

回答by Tyler Eich

Though this is possible with CSS3, I think SVG is a better tool for sophisticated interfaces.

尽管 CSS3 可以做到这一点，但我认为 SVG 是用于复杂界面的更好工具。

I made this with SVG (styled with CSS):

我用 SVG（用 CSS 设计）做了这个：

enter image description here

在此处输入图片说明

And here's a Plunk to demonstrate.

这里有一个 Plunk 来演示。

Answer 5

回答by Blake Mann

Well, it's a ton of markup, but you could do something like this:

嗯，这是大量的标记，但你可以做这样的事情：

Use display: table-cell;as it will automatically adjust the widths of items to fill spaces.

使用display: table-cell;它会自动调整项目的宽度以填充空间。

Then, have a set of circle elements, and a set of line elements. The line elements just have a bottom border on them, and the circle elements are just relatively positioned downwards to align with the line.

然后，有一组圆元素和一组线元素。线条元素只是有一个底部边框，圆形元素只是相对向下定位以与线条对齐。

Note that the circles need to have an extra container, otherwise table-cellwill stretch all the circles to the same height, and you don't want that that. This will require you to set the width of those containers to be 1px, which will force it to the size of it's child.

请注意，圆圈需要有一个额外的容器，否则table-cell会将所有圆圈拉伸到相同的高度，而您不希望那样。这将要求您将这些容器的宽度设置为 1px，这将强制其大小为它的子级。

Check out this demo:

看看这个演示：

http://jsfiddle.net/Sjdm4/

Answer 6

回答by Smakosh

Example I made based on the answer: https://codepen.io/Smakosh/pen/ZvvyMg

我根据答案制作的示例：https: //codepen.io/Smakosh/pen/ZvvyMg

Pug
ul
  li.list.active 1
  li.list 2
  li.list 3
  li.list 4
Sass
ul
  list-style: none
    li
      display: inline-block
      width: 4rem
      height: 4rem
      line-height: 4rem
      border-radius: 100%
      background: #d8d8d8
      margin-right: 2rem
      position: relative
      &:first-child
        margin-left: unset
        &:before
          display: none
      &:before
        content: ''
        width: 2.4rem
        background-color: #d8d8d8
        height: 2px
        position: absolute
        top: 2rem
        right: 3.9rem
    .active
      background: #03A9F4
      color: #fff
      &:before
        background-color: #03A9F4

Answer 7

回答by Trace

I used Bootstrap 4 and FontAwesome to make my version of this.

我使用 Bootstrap 4 和 FontAwesome 来制作我的版本。

Here's the code pen: [a link]https://codepen.io/tr4c355/pen/roBjWV

这是代码笔：[链接] https://codepen.io/tr4c355/pen/roBjWV

HTML & CSS:

HTML 和 CSS：

<style>
.line-btw { 
  height:3px;
  width:100px;
  background-color: orange;
}
</style>

<div class="fa-stack fa-lg text-center">
  <i class="fa fa-circle-o fa-stack-2x"></i>
  <div class=""><b>1</b></div>
</div>
<div class="line-btw"></div>
<div class="fa-stack fa-lg text-center" style="">
  <i class="fa fa-circle-o fa-stack-2x"></i>
  <div style=""><b>2</b></div>
</div>
<div class="line-btw"></div>
<div class="fa-stack fa-lg text-center" style="">
  <i class="fa fa-circle-o fa-stack-2x"></i>
  <div class=""><b>3</b></div>
</div>

CSS 创建由线连接的 CSS3 圆圈

提问by HGandhi

回答by bookcasey

回答by ccondrup

回答by Jhonatan Acelas Arevalo

回答by Tyler Eich

回答by Blake Mann

回答by Smakosh

回答by Trace

相关推荐

最近更新

标签

CSS 创建由线连接的 CSS3 圆圈

提问by HGandhi

回答by bookcasey

回答by ccondrup

回答by Jhonatan Acelas Arevalo

回答by Tyler Eich

回答by Blake Mann

回答by Smakosh

回答by Trace

相关推荐

CSS 背景图片 URL 加载失败

Firefox 字段的浏览器特定 CSS 填充

CSS 标签“div.img img”是什么意思？

CSS 无限旋转动画

相关推荐

最近更新

标签