how to connect circles with lines without overlapping

Question

How can i connect this circles with css (or js/jquery) so it can be responsive and lines not overlapping when screen is smaller. Also i have tried to but and line behind the whole container, but since my circles need to be transparent, the line is always behind circles:

This is the only way the line is not behind every circle. But i don't know how to make it not to overlap and i need my line go from one border to another border. Also when i reduce width the line overlaps and goes behind circle.

demo: 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>

Because you're using Pseudo elements (the ::before and ::after) there is no element for JS/JQ to act upon when the DOM is loaded. The only way I can see to get these lines to behave responsively is to manually add styles to the stylesheet during page operation (see http://stackoverflow.com/questions/5041494/selecting-and-manipulating-css-pseudo-elements-such-as-before-and-after-usin). — Erik, Mar 15 '16 at 20:23
Since you need their background transparent and can't use CSS, I'd suggest a rewrite where the lines are separate elements. This would let you perform basic math operations using JQ/JS, allowing you to connect them to the edges of the circles. Unfortunately I can't help with a rewrite due to my workload :/ There are plenty of different solutions (http://stackoverflow.com/questions/19382872/how-to-connect-html-divs-with-lines), and some GitHub projects that might make this trivial for you (https://github.com/jfmdev/jqSimpleConnect, http://jfmdev.github.io/jqSimpleConnect/demo2.html) — Erik, Mar 15 '16 at 20:37
i looked trough demos you sent me, and the jqSimpleConnect cant be the answer, since its doing lines from center. If you remove background you would see. But thanks for your time! — riogrande, Mar 15 '16 at 21:00
Ahh, sorry about that then. It's definitely doable with JS/JQ, though. A long time ago I made a node/edge graph generator for an online version of the game PowerGrid that way, but that code was lost. Good luck, hope I was of some sort of help. — Erik, Mar 15 '16 at 21:01
Not sure how to do it with CSS and it might be a lot of work to write code to calculate the position and width of each line to render as the browser resize. But if you have to stick with img and css, so be it. However, it should be simple to do in a table. — Will, Mar 15 '16 at 21:35
@Erik I managed to do it with only CSS. The only thing is you need to know exactly how much circles you will going to need, and thats it :) http://codepen.io/riogrande/pen/reWQeK Thank both of you for helping me! — riogrande, Mar 15 '16 at 21:46
@Will Look i managed to do it, you only need to know how much circles you need — riogrande, Mar 15 '16 at 21:46

jpec · Accepted Answer · 2016-03-17T14:33:35.857

I came up with this solution using simple markup and CSS. The Codepen includes animation examples, in case this is a progress kind of thing.

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

beautiful solution! did you take a look at my way maybe? just to know what you think? — riogrande, Mar 16 '16 at 12:22
Thanks! Yes, actually trying out your solution on codepen inspired me to take a crack at it. — jpec, Mar 17 '16 at 14:26
hey mate, i tagged your answer as correct because i liked how you did it and animate it! Thanks again — riogrande, Mar 17 '16 at 20:31

score 0 · Answer 2 · answered Mar 15 '16 at 21:58

Ok so I managed to do it with CSS only. The solution was to wrap circles into divs which have width of "100%/n" where "n" is number of circles you want to show. So you need to know how many are there. In my example there were 7 circles. Inside of those divs i put another div called circle. This div has style of circle and its position in center of parent div with margin: 0 auto;. With pseudo elements i created lines which needs to be very big (in lenght) so there wont be any holes. And then the overlapping is corrected with: position: relative; and overflow: hidden;. The circles are transparent but lines never cross to other div. Hacky but works.

Full code on: 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>

would you please open my codepen and try to increase width of circles before and after from width: 300%; to width: 9999%; for both before and after. Then see if it breaks? Thank you so much — riogrande, Mar 17 '16 at 19:18
That appears to work. FYI, [Stack Snippets](https://meta.stackoverflow.com/questions/269753/feedback-requested-runnable-code-snippets-in-questions-and-answers) make things like this a lot easier to demonstrate. Not having to leave the site is a **big** thing for me personally. — matt., Mar 17 '16 at 19:28
Thanks for your help, and for information's, will consider it! — riogrande, Mar 17 '16 at 20:30

how to connect circles with lines without overlapping

2 Answers2