Muller Lyer in Html - html

Question

I'm trying to make a version of the Muller-Lyer illusion in HTML (no image files, because I want to make the line length variable).
Here's what I have so far; it's got the right elements but isn't working correctly. What's the best approach?
.arrow {
border: solid black;
border-width: 0 4px 4px 0;
display: inline-block;
padding: 40px;
}
.right {
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
}
.left {
transform: rotate(135deg);
-webkit-transform: rotate(135deg);
}
.line-container {
display: flex;
width: 100%;
margin: 20px auto;
align-items: center;
}
.line {
flex-grow: 1;
height: 2px;
background: black;
position: relative;
}
.line.arrow-right:after {
position: absolute;
content: '';
bottom: -10px;
right: 0;
width: 0;
height: 0;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-left: 10px solid transparent;
}
.line.arrow-left:after {
position: absolute;
content: '';
top: -10px;
left: 0;
width: 0;
height: 0;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-right: 10px solid transparent;
}
label {
margin: 0 15px;
}
<i class="arrow right"></i><div class="line-container"><span class="line arrow-left"></span><span class="line arrow-right"></span>
</div><i class="arrow left"></i>

Answer 1

I used your base cde and tried to simplify a bit.
Have a look at this codepen. Is it what you are looking for?
The "weakness" of using rotated borders is that the arrows are longer than the container div, that's the reason why I added some margin.
The best solution is probably to use SVG lines.
.line-container {
margin: 80px;
width: 400px;
height: 100px;
position: relative;
}
.arrow {
position: absolute;
border: solid black;
border-width: 0 8px 8px 0;
height: 100px;
width: 100px;
}
.right.out {
right: 16px;
}
.left.out {
left: 16px;
}
.right.in {
left: -120px;
}
.left.in {
right: -120px;
}
.right {
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
}
.left {
transform: rotate(135deg);
-webkit-transform: rotate(135deg);
}
.line {
width: 100%;
border-top: 8px solid black;
position: absolute;
top: 50%;
left: 0;
}
<div class="line-container">
<i class="arrow right in"></i>
<div class="line"></div>
<i class="arrow left in"></i>
</div>
<div class="line-container">
<i class="arrow left out"></i>
<div class="line"></div>
<i class="arrow right out"></i>
</div>