How to connect line to two borders html/css - html

Question

Good morning guys. I just want to know how to do this in html and css. :)
I've done this so far in my website.
I've been working for this for days but I can't find an exact way to do it that way.
This is my html code:
<div class="container">
<div class="col-md-2 col-md-offset-1"><img class="img-circle img-left" style="border: 5px solid #0766dc;" src="1.png"></div>
<div class="col-md-2" id="gradient1"></div>
<div class="col-md-2"><img class="img-circle img-center" style="border: 5px solid #00afdc;" src="2.png"></div>
<div class="col-md-2" id="gradient2"></div>
<div class="col-md-2"><img class="img-circle img-right" style="border: 5px solid #28ddb3;" src="3.png"></div>
</div>
and this is my css:
#gradient1 {
display: block;
background: linear-gradient(to right, #0766dc, #00afdc);
height: 5px;
margin-top: 100px;
}
#gradient2 {
display: block;
background: linear-gradient(to right, #00afdc, #28ddb3);
height: 5px;
margin-top: 100px;
}
.img-center {
margin: auto;
}
.img-right {
margin-right: auto;
}
.img-left {
margin-left: auto;
}
.img-circle {
display: block;
padding: 10px;
border-radius: 50%;
width: 200px;
height: 200px;
}

Answer 1

This is a simple code that works. You will have to resize the elements to your desired size, recolor, etc.
<div style='height:60px; position:relative; width:60px; border:1px solid black; border-radius:60px; vertical-align:middle; text-align:center; float:left; '><p style='position:absolute; margin:0px; padding:0px; top:50%; left:50%; transform: translate(-50%, -50%);'>Hi</p></div>
<div style='height:30px; width:50px; border-bottom:1px solid black; float:left'></div></div>
<div style='height:60px; position:relative; width:60px; border:1px solid black; border-radius:60px; vertical-align:middle; text-align:center; float:left; '><p style='position:absolute; margin:0px; padding:0px; top:50%; left:50%; transform: translate(-50%, -50%);'>Hi # 2</p></div>
<div style='height:30px; width:50px; border-bottom:1px solid black; float:left'></div></div>
<div style='height:60px; position:relative; width:60px; border:1px solid black; border-radius:60px; vertical-align:middle; text-align:center; float:left; '><p style='position:absolute; margin:0px; padding:0px; top:50%; left:50%; transform: translate(-50%, -50%);'>Hi # 3</p></div>
When resizing, make sure that you make the border radius the same as your height and width size. Note that the line div height is half the circle div height.

Answer 2

Your code when I run it does not look like the picture provided. The lines are almost halfway inside the circle to their left.
You can try something like this:
<div class="circle"></div><div class="line"></div><div class="circle"></div>
.circle {
height: 100px;
width: 100px;
border: 4px solid black;
border-radius: 50%;
display: inline-block;
box-sizing: content-box;
}
.line {
display: inline-block;
border-top: 4px solid black;
width: 100px;
height: 50px;
box-sizing: content-box;
}
Make sure you have no spaces between html inline or inline-block elements.
Add circles and change the sizes, colors, etc. at will. You'll probably want to wrap it all in a div with a minimum width so that the elements don't wrap when the screen gets small.

Answer 3

You were so close! :) But for custom things like this bootstrap is very unflexible, so sometimes you have to overwrite some properties.
So, problem is that bootstrap sets a padding on it's elements, that is the reason of the space between your circles:
To solve this issue just make a new class:
<div class="col-md-2 outer">
And apply the style like this:
.outer {
padding:0;
}
Another problem I see in your code is that you set the image width and height manually. But the divs with the class col-md-2 adjust their size depending on the screen size. So resizing can result in overlapping.
So you have to think about, if you set also the width / height of .outer to static values. To prevent this you can at least set the min-height and min-width of the div that have the circle inside.
Check out the solution on jsfiddle:
https://jsfiddle.net/w58L7ojL/ (zoom out to see it working)