CODEWITHSUNDEEP
htmlcssmaterialize
Mohamed Elmi Hassan
Mohamed Elmi Hassan

Reputation: 331

I need to draw 2 circles connected with line ? In css only

I need to draw 2 circle connected with css so that i will use flight search website if you can let me get you answer this is what i want

enter image description here

pure css or materializecss thanks

Upvotes: 0

Views: 1980

Answers (1)

Michael Coker
Michael Coker

Reputation: 53674

This is the general idea using a single element and pseudo elements for the circles. Position them over the line, and use a background color in the circle that matches the background of the page

body {
  padding: 2em;
}
div {
  background: blue;
  height: 1px;
  position: relative;
}
div:before, div:after {
  position: absolute;
  top: 50%; left: 0;
  transform: translateY(-50%);
  content: '';
  height: 1em; width: 1em;
  border: 1px solid blue;
  border-radius: 50%;
  background: #fff;
}

div:after {
  left: auto;
  right: 0;
}
<div></div>

Or you can position the circles outside of the parent element instead of using a background image.

body {
  padding: 2em;
}
div {
  background: blue;
  height: 1px;
  position: relative;
}
div:before, div:after {
  position: absolute;
  top: 50%; left: 0;
  transform: translate(-100%,-50%);
  content: '';
  height: 1em; width: 1em;
  border: 1px solid blue;
  border-radius: 50%;
}

div:after {
  left: auto;
  right: 0;
  transform: translate(100%,-50%);
}
<div></div>

Upvotes: 2

Related Questions