CODEWITHSUNDEEP
htmlcss
Sagar Kodte
Sagar Kodte

Reputation: 3815

How to make line between two circles which touching to the both circle?

I want to make a line between two circles, for that, I have used the below code by using pseudo-element CSS. I would like to make the line between these two circles responsive, now it's intersecting with circle in some other devices like mobile, etc. How to make it responsive or any other solution that does the same design? Please help.

.cart_header_tab {
  display: flex;
  margin-top: 35px;
}
.cart_header_tab > div {
  text-align: center;
  margin-right: 100px;
  cursor: pointer;
}
.cart_header_tab h6 {
  color:#02b5f9;
  font-weight: 400;
}
.cart_header_tab div:last-child h6 {
  color:#ccc
}
span.circle_one::after {
  content: "";
  width: 152px;
  height: 1px;
  background: #eee;
  position: absolute;
  top: 6px;
  left: 14px;
}
.cart_header_tab span.circle_one {
  border: 1px solid #2fe4ba;
}
.cart_header_tab span {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 1px solid #ccc;
  border-radius: 100%;
  position: relative;
}
<div class="cart_header_tab">
    <div>
        <span class="circle_one"></span>
         <h6>Order Details</h6>
    </div>
    <div>
        <span class="circle_two"></span>
        <h6>Freight Options</h6>
    </div>
</div>

Upvotes: 1

Views: 801

Answers (2)

Awais
Awais

Reputation: 4902

Using flex i insert that line between circle as separator itself is a child of flex and hen using margin adjust that according to circles

.cart_header_tab {
  display: flex;
  margin-top: 35px;
}

.cart_header_tab>div {
  text-align: center;
  cursor: pointer;
}

.cart_header_tab h6 {
  color: #02b5f9;
  font-weight: 400;
}

.cart_header_tab div:last-child h6 {
  color: #ccc
}

.cart_header_tab {
  position: relative
}

.sep {
    width: 100%;
    height: 1px;
    background: #eee;
    margin: 9px -21px 0;
}

.cart_header_tab span.circle_one {
  border: 1px solid #2fe4ba;
  background: #fff;
  z-index: 1;
}

.circle_two {
  background: #fff;
  z-index: 1;
}

.cart_header_tab span {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 1px solid #ccc;
  border-radius: 100%;
  position: relative;
}
<div class="cart_header_tab">
  <div>
    <span class="circle_one"></span>
    <h6>Order Details</h6>
  </div>
  <div class="sep"></div>
  <div>
    <span class="circle_two"></span>
    <h6>Freight Options</h6>
  </div>
</div>

Upvotes: 1

Manjuboyz
Manjuboyz

Reputation: 7066

You can start tweaking the code something like this:

Be aware that if you wanted to change the size or width of the circle you have to tweak the other property in the css, hope that is not an issue here. 

#cart_header_tab {
  position: relative;
  display: inline-block;
}

#cart_header_tab::after {
  content: "";
  position: absolute;
  width: 50%;
  z-index: -1;
  top: 20%;
  left: 25%;
  border: 1px solid gray;
  /* line between circles */
}

#cart_header_tab div {
  display: inline-block;
  font-size: 12px;
  text-align: center;
  min-width: 150px;
}

#cart_header_tab span {
  color: white;
  background: white;
  display: block;
  height: 15px;
  margin: 0 auto 10px;
  padding-top: 20px;
  width: 30px;
  border-radius: 50%;
  border: 1px solid #22A7F2;
}
<div id="cart_header_tab">
  <div><span class="circle_one"></span>
    <h6>Order Details</h6>
  </div>
  <div><span class="circle_two"></span>
    <h6>Freight Options</h6>
  </div>
</div>

Upvotes: 1

Related Questions