CODEWITHSUNDEEP
htmlcsscss-shapes
Morpheus
Morpheus

Reputation: 997

connect circles with border radius and lines

I want to connect 3 circle images with dotted border.

My code:

<div class="main">
    <div class="circle"><img src="http://i59.tinypic.com/fbl21d.png"  /></div>
    <div class="circle"><img src="http://i59.tinypic.com/fbl21d.png" /></div>
    <div class="circle"><img src="http://i59.tinypic.com/fbl21d.png" /></div>
</div>

jsfiddle code

I would like to have something like on the image below.

I want to look it like this

How can I achieve this?

Upvotes: 1

Views: 1524

Answers (4)

jbutler483
jbutler483

Reputation: 24549

You could use a pseudo element in conjunction with the :not pseudo selector.

This would allow you to add multiple circle classes, and give this effect for more than three elements.

.circle {
  display: inline-block;
  height: 100px;
  width: 100px;
  border-radius: 50%;
  background: tomato;
  margin: 20px;
  position: relative;
  border: 3px solid silver;
}
.circle:not(:first-child):before {
  content: "";
  position: absolute;
  width: 40px;
  height: 0;
  border-bottom: 6px dashed blue;
  top: -webkit-calc(50% - 3px);
  top: calc(50% - 3px);
  left: -42px;
}
.wrapper {
  display: inline-block;
  background: #f2f2f2;
}
html,
body {
  text-align: center;
}
<div class="wrapper">
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
</div>

Upvotes: 2

Junaid S.
Junaid S.

Reputation: 2642

Here is the Solution

JSFIddle

.circle:after {
    content:'-   -   -   -   -   -   -   -';
    position: absolute;
    margin-top: 15px;
    color: red;

}

.circle.last:after {
    content: none;
}

Upvotes: 0

Ivan Gerasimenko
Ivan Gerasimenko

Reputation: 2428

Agree with @marsh that it could be solved with css pseudo elements but it is better to apply styles to .circle class so you cold add as many circles as you want without changing css:

.main .circle:not(:last-child):after {
    content: "";
    display: block;
    position: relative;
    top: -35px;
    left: 70px;
    width: 60px;
    border: 2px dashed red;
}

:not selector will allow to remove dashed line from :last-child of .main

Demo fiddle

Upvotes: 0

marsh
marsh

Reputation: 1441

To achieve this you can use pseudo selector :before, and place border as you want, for example DEMO

.main:before {
    content:"";
    position:absolute;
    left: 45px;
    right: 120px;
    top: 70px;
    border-top: 5px dotted #f00;
}

Upvotes: 1

Related Questions