how to connect circles with lines without ovelaping


Tags: javascript,jquery,html,css,css3

Problem :

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:

wrong

This is the only way the line is not behind every circle. But i dont 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>


Solution :

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

    CSS Howto..

    How to correctly use text overflow in bootstrap

    How do I put a horizontal line/border right in the middle of a table row?

    How to add a color transitions in CSS and HTML like the one in the login area of the Instagram app?

    Android stock browser: How to prevent double tap closing browser

    How do I make images fit the entire screen fully, regardless of screen size?

    Using CSS, how do I move a DIV to the left of the centre position?

    How can I cut long text according to available div area size?

    HTML+CSS : how to move not close divs to create a right column?

    How can I add CSS and JS in Symfony2?

    How to use scaleable pixels in css

    How to hide class=“” CSS

    How can I use jQuery to add a fade in hover effect to my nav items?

    how to create a fullscreen website design?

    how to configure .htc files to work on nginx

    CSS: How to set position absolute of a span inside a relative-position-div which contains [closed]

    On a web page how do I display a label that changes to a drop down box on hover

    How to make a webpage look like a popup? [closed]

    How to identify element using link name in a onclick html tag?

    How do I vertically align my multi-line p tag in my header?

    How to make all divs same height, based on text content?

    how to crop big image in bootstrap carousel

    How classes work in a CSS file? [closed]

    Data Tables in tabPanel output from navPanel in Shiny: How to change background colors using CSS

    How to efficiently update css on multiple selector classes in jquery

    Dompdf: how to get background image to show on first page only

    How to scale div from jquery css

    How can I remove this white space from a table?

    How to correctly impose a background-color to a div wrapping article and aside in HTML/CSS?

    How do I spilt the footer into different widths?

    How do I mask a region of the page in a responsive design using CSS?