如何用不重疊的線連接圓

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>