Muller Lyer in 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>

simplest solution would be to use a picture and wrap it into a div-container with the value: `object-fit: fill;` then you raise or lwoer the div width and the image will stretch or collapse horizontally. Easiest solution without much coding or using pseudo elements but the lenght ist still variable. However if you want to do it the complicated way, simply use SVG. — tacoshy, Aug 26 '20 at 01:35

score 0 · Accepted Answer · answered Aug 26 '20 at 05:10

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>

That looks amazing, thanks so much @Yanou! I'm having some slight problems where the arrows are slightly disjointed from the main horizontal line. Do you have any recommendations for keeping them totally accurate like this example (across browsers)? — CDawg, Aug 27 '20 at 07:54
My technique was to hook the line and arrows to the line-container with a `position: relative` / `position: absolute`. That should prevent them from moving from eachother. — Yanou, Aug 29 '20 at 10:09

Muller Lyer in Html

1 Answers1