CODEWITHSUNDEEP
css
gcooke75
gcooke75

Reputation: 61

Css solution for circle and line

I am looking for a css solution to the below image that is responsive.

I have the following html and css, but it isn't respnosive and I need the line to float alongside the circle.

<div class="col-xs-6 col-sm-2">
    <div class="circle"> </div>
    <div class="line"><img src="assets/line.png" class="black-line"></div>
</div>

.circle {
background-color:#fff;
border:2px solid #222;    
height:50px;
border-radius:50%;
-moz-border-radius:50%;
-webkit-border-radius:50%;
width:50px;
float: left;
 line-height: 50px;}

.line { line-height: 50px; text-align: center; float: left; padding: 0 8px;}

css solution

Upvotes: 4

Views: 7338

Answers (2)

Fabrizio Calderan
Fabrizio Calderan

Reputation: 123397

Here's my attempt on a responsive approach with flexbox. The crossing line has been done using a pseudoelement (no need to use markup for styling purpose)

The gap between a circle and the line has been done with the box-shadow property

<div class="circlesbox">
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
</div>

CSS

.circlesbox {
  position: relative;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
}

.circlesbox:before {
  content: "";
  position: absolute;
  zindex: 1;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 3px;
  width: 100%;
  background: #000;
}

.circle {
   position: relative;
   z-index: 2;
   border: 2px solid #222;   
   background: #fff;
   box-shadow: 0 0 0 20px #fff;
   width:50px;
   height:50px;
   border-radius:50%;
}

Final result

enter image description here

Upvotes: 3

Toby
Toby

Reputation: 13385

Here's a working responsive version of this:

.container {
  border-bottom: 3px solid #111;
  height: 1rem;
  display: flex;
  justify-content: space-between;
}

.circle {
  display: inline-block;
  background: #fff;
  width: 2rem;
  height: 2rem;
  border: 2px solid #111;
  border-radius: 2.5rem;
  box-shadow: 0 0 0 0.5rem #fff;
}

@media (min-width: 768px) {
  .container {
    height: 2.5rem;
  }
  .circle {
    width: 5rem;
    height: 5rem;
  }
}
<div class="container">
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
</div>

Elements of this might not suit your needs, although with the information provided it's difficult to say. However, it should provide a solid starting point.

Upvotes: 4

Related Questions