0

I'm just learning the layout and I would like to make a page where there are blocks and lines between them and when you scroll, they will appear I need to draw a vertical line that will connect the blocks, but so that it was adaptive. I tried using skew, but it is not adaptive

.skill-l{
    width: 100%;
    height: min-content;
    background-color: pink;

}
.skill-r{
    width: 100%;
    height: min-content;
    text-align: end;
    background-color: lightgreen;
}

.container-main{
    margin-left: 33%;
    margin-right: 33%;
}

.line-lr {
    height: 50vh;
    width: 3px;
    background: green;
    transform: skewX(30deg);
    margin-left: 50%;
    color: green;
}
.line-rl {
    height: 50vh;
    width: 3px;
    background: yellow;
    transform: skewX(-30deg);
    color: yellow;
}
<div class="container-main">
    <div class="skill-l text-white">
        <h2>DIV 1</h2>
    </div>
    <div class="line-lr mx-auto">
    </div>
    <div class="skill-r text-white">
        <h2>DIV 2</h2>
    </div>
    <div class="line-rl mx-auto"></div>
    <div class="skill-l text-white">
        <h2>DIV 3</h2>
    </div>
</div>

My lines go over the block. How can I prevent that?

JoSSte
  • 2,953
  • 6
  • 34
  • 54
Aidar
  • 9
  • 2
  • I have edited your sample so that there is an example, and you can refer to the elements by colour. can you try to rephrase your question in order to make it clearer what the issue is? – JoSSte Dec 25 '22 at 13:14

0 Answers0