CODEWITHSUNDEEP
css
Machinarius
Machinarius

Reputation: 3731

How to connect two divs with a line responsively?

I am using a flexbox to create a sort of pill navigation/wizard system like this:

.wizard-container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
}

.pill {
  background: orange;
  padding: 3px 15px;
  color: white;
  margin: 0;
  display: inline-block;
  border-radius: 10px;
}

.connector {
  display: inline-block;
  background: orange;
  height: 7px;
  flex-grow: 1;
}
<div class="wizard-container">
  <div class="pill">Hello</div>
  <div class="connector"></div>
  <div class="pill">Beautiful</div>
  <div class="connector"></div>
  <div class="pill">World</div>
</div>

As you may be able to see, the flexbox wraps the .pill elements vertically when the viewport is reduced, but the .connector elements remain horizontal and frankly look quite ugly. I could write a media query to display: none them out, but I was wondering if it's possible to sort of have them draw a sort of snake path starting from the right side of the pill above and ending by the left of the pill below?

Upvotes: 0

Views: 1636

Answers (1)

Temani Afif
Temani Afif

Reputation: 272797

I would do this differently using pseudo element and the connector will disappear when the element will wrap. You can have a vertical ones as a bonus to keep the linking. 

.wizard-container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  overflow:hidden; /* This one is important */
}

.pill {
  background: orange;
  padding: 3px 15px;
  color: white;
  border-radius: 10px;
  font-size:25px;
  position:relative;
  margin:0 0 10px;
}
.pill:before {
  content:"";
  position:absolute;
  z-index:-1;
  right:100%;
  height:7px;
  top:50%;
  transform:translateY(-50%);
  width:100vw;
  background:inherit;
}
.pill:after {
  content:"";
  position:absolute;
  z-index:-1;
  bottom:100%;
  width:7px;
  left:40px;
  height:100vh;
  background:inherit;
}
<div class="wizard-container">
  <div class="pill">Hello</div>
  <div class="pill">Beautiful</div>
  <div class="pill">World</div>
</div>

Upvotes: 1

Related Questions