<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%;
}
}
}
View Compiled
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();
});
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.