如何用线连接圆而不重叠

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 包含动画示例，以防这是一种进步。

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;
}

Answer 2

好的，所以我设法仅使用 CSS 来做到这一点。解决方案是将圆圈包装成宽度为“100%/n”的 div，其中“n”是您要显示的圆圈数。所以你需要知道有多少。在我的示例中，有 7 个圆圈。在这些 div 中，我放置了另一个名为 circle 的 div。此 div 具有圆形样式，其位置位于父 div 的中心，margin: 0 auto;。使用伪元素，我创建了需要非常大（长度）的线条，因此不会有任何孔。然后用position: relative; 和overflow: hidden; 纠正重叠。圆圈是透明的，但线条永远不会与其他 div 交叉。哈克但有效。

完整代码在：http://codepen.io/riogrande/pen/reWQeK

css：

* {
  box-sizing: border-box;
}

.progress {
  .sevent{
    width: (100/7) * 1%;
    text-align: center;
    float: left;
    background:lightblue;
    position: relative;
    overflow: hidden;
    .circle {
      width: 60px;
      height:60px;
      margin: 0 auto;
      border: 6px solid red;
      border-radius:50%;
      position: relative;
      &:before {
        content: "";
        width: 300%;
        border-top: 6px solid red;
        position: absolute;
        right: 100%;
        top: 50%;
        transform:translateY(-50%);
      }
      &:after {
        content: "";
        width: 300%;
        border-top: 6px solid red;
        position: absolute;
        left: 100%;
        top: 50%;
        transform:translateY(-50%);
      }
    }
    &:last-child {
      .circle {
        &:after {
          display: none;
        }
      }
    }
    &:first-child {
      .circle {
        &:before {
          display: none;
        }
      }
    }
  }
}

HTML：

<div class="progress">

  <div class="sevent">
    <div class="circle">
      1
    </div>
  </div>

  <div class="sevent">
    <div class="circle">
      1
    </div>
  </div>

  <div class="sevent">
    <div class="circle">
      1
    </div>
  </div>

  <div class="sevent">
    <div class="circle">
      1
    </div>
  </div>

  <div class="sevent">
    <div class="circle">
      1
    </div>
  </div>

  <div class="sevent">
    <div class="circle">
      1
    </div>
  </div>

  <div class="sevent">
    <div class="circle">
      1
    </div>
  </div>

</div>