CODEWITHSUNDEEP
reactjs
Серега Бубело
Серега Бубело

Reputation: 29

Merge three lines into one multi color

Currently I have three lines with different colors. I need to make it one colorful line that starts with first color and ends with the last one. Here is the picture enter image description here

And here is the styles

let container = {
        display: display,
        width: left,
        height: '3px',
        backgroundColor: item.lineColor,
        // position: 'absolute',

With position: absolute it makes one line but with the last color(red). How can I make it a multicolor proper line?

Upvotes: 0

Views: 53

Answers (2)

remix23
remix23

Reputation: 2994

Playing With z-index can turn out tricky real fast because of the stacking context.

A more natural way of dealing with this would be to simply reverse the order of the lines in the markup:

The red (last) line appears on top of the others because that's how the browser naturaly stacks content.

Instead of adding the lines in the markup in the order yellow, blue, red, just reverse it to red, blue, yellow.

This way the blue line will cover the red and the yellow will cover the blue, appearing as a three section line.

.container {
  height: 10px;
  background-color: #D0D0D0;
  position: relative;
}

.line3 {
  position: absolute;
  top: 3px;
  width: 66%;
  height: 4px;
  background-color: red;
}

.line2 {
  position: absolute;
  top: 3px;
  width: 50%;
  height: 4px;
  background-color: blue;
}

.line1 {
  position: absolute;
  top: 3px;
  width: 33%;
  height: 4px;
  background-color: yellow;
}
<div class="container">
  <div class="line3"></div>
  <div class="line2"></div>
  <div class="line1"></div>
</div>

Upvotes: 1

Kartal Erkoc
Kartal Erkoc

Reputation: 290

In addition to using position: absolute, you can form a stacking context to display one single colorful line by assigning each line a z-index value. Just give higher z-index value to the line that you want it to be displayed at the top. Using position: absolute together with z-index can solve your issue.

For reference regarding stacking context you can visit here

Upvotes: 0

Related Questions