CSS circles and lines - connectors

Question

I am trying to create some lines and circles that connect themselves with each other.

Here is my attempt but I am only able to connect the first circle to the first line, however I want to have several displayed horizontally.

Code from fiddle:

<!DOCTYPE html>
<head>
<style>
.flow {
    height: 5em;
    left: -0.3em;   
}

.flow div:first-child {
    left: 0em;  
}

.circle {
    border-radius: 50%;
    display: inline-block;
    background: green;
    width: 2.5em;
    height: 2.5em;
    box-shadow: 0px 0px 10px 4px rgba(50, 160, 45, 0.75);
    -moz-box-shadow: 0px 0px 10px 4px rgba(50, 160, 45, 0.75);
    -webkit-box-shadow: 0px 0px 10px 4px rgba(50, 160, 45, 0.75);
    position: relative;
    left:inherit;
}

.line {
    display: inline-block;
    background: green;
    height: 0.5em;
    width: 300px;
    position: relative;
    margin-bottom: 1.0em;
    box-shadow: 0px 0px 10px 4px rgba(50, 160, 45, 0.75);
    -moz-box-shadow: 0px 0px 10px 4px rgba(50, 160, 45, 0.75);
    -webkit-box-shadow: 0px 0px 10px 4px rgba(50, 160, 45, 0.75);
    left:inherit;
}
</style>
</head>
<body>
    <div class="flow">
       <div id="circle1" class="circle"></div>
       <div class="line"> </div>
       <div id="circle1" class="circle"></div>
   </div>
</body>

You may also go with somerhing like this : http://jsfiddle.net/dq7pf/11/ — Nico O, Mar 04 '14 at 23:56
@NicoO Nice but I need to have lines with a length attribute, and separated from circles. — user2779312, Mar 05 '14 at 00:00
I can not edit edit anymore for the next hours. Will get back to this if there is no answer till then — Nico O, Mar 05 '14 at 00:05

score 4 · Accepted Answer · edited May 23 '17 at 12:28

4

The problem is caused by the spaces between your circle and line elements.

To solve it, you can use one of the following:

Use floating. Downside: floating converts elements to blocks, so it breaks the vertical aligning of inline-blocks.
Use font-size: 0. Downside: it breaks lengths with em units.
Use text-space-collapse: trim-inner. Downside: is a draft, no browser support.
Wrap the spaces in html comments.

^{(Also see Ignore whitespace in HTML)}

In your case, the last one is the best:

<div class="flow"><!--
    --><div class="circle"></div><!--
    --><div class="line"></div><!--
--></div>

You can see it in action in this Demo.

_{(Note I also added white-space: nowrap to avoid breaking lines, andz-index:1 to show circles above lines)}

edited May 23 '17 at 12:28

Community

1
1

answered Mar 04 '14 at 23:40

Oriol

274,082
63
437
513

It works great !! But do I really need to go that way? If I switch to pixels can I use your second approach? (plus 1 meanwhile :), nice effort). – user2779312 Mar 04 '14 at 23:56
@user2779312 Yes, you can switch to pixels (or any unit non dependent to font-size), or you can reset it with `.circle,.line {font-size: 16px}` [**Demo**](http://jsfiddle.net/v9Vqe/4/) – Oriol Mar 05 '14 at 00:14

CSS circles and lines - connectors

1 Answers1