javascript - 如何在不重叠的情况下用线连接圆圈

Question

我如何将这个圆圈与 css(或 js/jquery)连接起来，以便它可以响应并且当屏幕较小时线条不会重叠。我也尝试过在整个容器后面画线，但由于我的圆圈需要透明，所以线总是在圆圈后面:

这是直线不在每个圆后面的唯一方法。但我不知道如何让它不重叠，我需要我的线从一个边界到另一个边界。另外，当我减小宽度时，线会重叠并落后于圆圈。

演示:http://codepen.io/riogrande/pen/jqVKBb

CSS:

.flex-container {
  padding: 0;
  margin: 0;
  list-style: none;
  -ms-box-orient: horizontal;
  display: -webkit-box;
  display: -ms-flexbox;
  display: -moz-flex;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
.flex-container .flex-item {
  background: transparent;
  width: 50px;
  height: 50px;
  margin: 5px;
  line-height: 50px;
  color: #ffefbd;
  font-weight: bold;
  font-size: 22px;
  text-align: center;
  border: 6px solid #ffefbd;
  border-radius: 50%;
  position: relative;
}
.flex-container .flex-item:after {
  width: 100%;
  border-top: 6px solid #ffefbd;
  content: '';
  display: block;
  position: absolute;
  left: 100%;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}
.flex-container .flex-item:before {
  width: 100%;
  border-top: 6px solid #ffefbd;
  content: '';
  display: block;
  position: absolute;
  right: 100%;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}
.flex-container .flex-item:last-child:after {
  display: none;
}
.flex-container .flex-item:first-child:before {
  display: none;
}

HTML:

<ul class="flex-container space-between">
  <li class="flex-item">1</li>
  <li class="flex-item">2</li>
  <li class="flex-item">3</li>
  <li class="flex-item">4</li>
  <li class="flex-item">5</li>
  <li class="flex-item">6</li>
  <li class="flex-item">7</li>
</ul>

Answer 1

我使用简单的标记和 CSS 想出了这个解决方案。 Codepen 包含动画示例，以防这是一种进步。

代码笔:http://codepen.io/jpecor-pmi/pen/GZNPWO

HTML

<section id="circles">
    <div data-num="1"></div>
    <div data-num="2"></div>
    <div data-num="3"></div>
    <div data-num="4"></div>
    <div data-num="5"></div>
    <div data-num="6"></div>
    <div data-num="7"></div>
</section>

CSS

/*
  @circle-diameter: 50px;
  @circle-count: 7;
  @border-width: 6px;
  @border-color: #ffefbd;
*/

/* circle containers */

#circles > div {
    background: transparent;
    font-weight: bold;
    float: left;
    height: 50px; /* @circle-diameter */
    position: relative;
    width: calc((100% - 50px) / 6 - .1px); /* (100% - @circle-diameter) / (@circle-count - 1) - 0.1px for IE :( */
}

/* circle */

#circles > div::before {
    border: 6px solid #ffefbd; /* @border-thickness solid @border-color */
    border-radius: 25px; /* @circle-diameter / 2 */
    color: #ffefbd;
    content: attr(data-num); /* value from data-num attribute */
    display: block;
    float: left;
    font: 21px sans-serif;
    height: 50px; /* @circle-diameter */
    line-height: 38px;
    text-align: center;
    width: 50px; /* @circle-diameter */
}

/* line */

#circles > div::after {
    background: #ffefbd; /* @border-color */
    content: '';
    display: block;
    height: 6px; /* @border-thickness */
    position: absolute;
    right: -1px; /* removes gap between circle and line */
    top: calc(50% - 3px); /* 50% - (@border-thickness / 2) */
    width: calc(100% - 48px); /* 100% - (@circle-diameter - 2px) */
}

/* first circle */

#circles > div:first-child {
    width: 50px; /* @circle-diameter */
}

#circles > div:first-child::after {
    display: none; /* hide line for first circle */
}

/* reset */

#circles,
#circles > div,
#circles > div::before,
#circles > div::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}