<main>
  <div class="container left">
    <p>click this box to toggle containment</p>
    <p>contain: none;</p>
  </div>
  <div class="connections main">
    <div class="connection horizontal"></div>
  </div>
  <div class="container right">
    <p>click this box to toggle containment</p>
    <p>contain: none;</p>
  </div>
</main>

<div class="connections bottom">
  <div class="connection vertical left"></div>
  <div class="connection vertical right"></div>
</div>

<div class="container bottom">
  <p>Red arrows represent descendants that can be considered in page layout calculations.</p>
  <p>With layout containment applied the amount of layout calculations can be reduced.</p>
</div>

@import url('https://fonts.googleapis.com/css?family=Open+Sans&display=swap');

html {
  font-family: 'Open Sans', sans-serif;
  height: 100%;
  overflow: hidden;
}
body {
  align-items: center;
  background-color: #1d1e22;
  color: white;
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: center;
  margin: 0;
  padding: 0;
}

main {
  display: flex;
  
  p {
    text-align: center;
  }
}

.container {
  background-color: #333;
  border: 3px solid rebeccapurple;
  
  &.left,
  &.right {
    cursor: pointer;
    height: 200px;
    width: 200px;
    
    &.contain {
      border-color: green;
      contain: layout;
    }
  }
  
  &.bottom {
    height: 200px;
    width: 500px;
    
    p {
      margin: 10px;
    }
  }
}

.connections {
  position: relative;
  
  &.main {
    height: 200px;
    width: 100px;
  }
  
  &.bottom {
    height: 100px;
    width: 500px;
  }
}

.connection {
  &.contain {
    opacity: 0.5;
  }
  
  &.horizontal {
    border-top: 2px solid red;
    position: absolute;
    top: 50%;
    width: 100%;
    
    &.contain {
      border-top-style: dotted;
      opacity: 0.25;
      
      &::before {
        border-bottom-style: dotted;
        border-left-style: dotted;
      }
      &::after {
        border-right-style: dotted;
        border-top-style: dotted;
      }
    }
    
    &::before,
    &::after {
      border: 2px solid red;
      content: '';
      display: block;
      height: 25px;
      position: absolute;
      top: -15px;
      transform: rotate3d(0, 0, 1, 45deg);
      width: 25px;
    }
    &::before {
      border-right-style: none;
      border-top-style: none;
      left: 4px;
    }
    &::after {
      border-bottom-style: none;
      border-left-style: none;
      right: 4px;
    }
  }
  
  &.vertical {
    border-left: 2px solid red;
    position: absolute;
    height: 100%;
    
    &.contain {
      border-left-style: dotted;
      opacity: 0.25;
      
      &::before {
        border-left-style: dotted;
        border-top-style: dotted;
      }
      &::after {
        border-bottom-style: dotted;
        border-right-style: dotted;
      }
    }
    
    &::before,
    &::after {
      border: 2px solid red;
      content: '';
      display: block;
      left: -15px;
      height: 25px;
      position: absolute;
      transform: rotate3d(0, 0, 1, 45deg);
      width: 25px;
    }
    &::before {
      border-bottom-style: none;
      border-right-style: none;
      top: 4px;
    }
    &::after {
      border-left-style: none;
      border-top-style: none;
      bottom: 4px;
    }
    
    &.left {
      left: 25%;
    }
    &.right {
      right: 25%;
    }
  }
}

const container_left = document.querySelector('.container.left');
const container_right = document.querySelector('.container.right');
const connection_main = document.querySelector('.connection.horizontal');
const connection_left = document.querySelector('.connection.left');
const connection_right = document.querySelector('.connection.right');

function set_connections () {
  connection_main.classList.toggle('contain', container_left.classList.contains('contain') || container_right.classList.contains('contain'));
  connection_left.classList.toggle('contain', container_left.classList.contains('contain'));
  connection_right.classList.toggle('contain', container_right.classList.contains('contain'));
}

container_left.addEventListener('click', function () {
  this.classList.toggle('contain');
  
  set_connections();
});

container_right.addEventListener('click', function () {
  this.classList.toggle('contain');
  
  set_connections();
});