I want to do an effect similar to a Penrose stair where you have element-1
on top of element-2
but behind element-3
witch is behind of element-2
a bit complicated from what I can tell.
I have this code
<body>
<div class="parent">
<div id="s1" class="square"><div></div></div>
<div id="s2" class="square"><div></div></div>
</div>
</body>
.parent {
width: 300px;
height: 300px;
border-radius: 25px;
background: orange;
position: relative;
}
.square{
display: inline-block;
position: absolute;
z-index: 10;
}
#s1{
--Color: teal;
left: calc(100px);
top: calc(100px);
transform: rotate(45deg);
}
#s2{
--Color: cornflowerblue;
right: calc(100px);
bottom: calc(100px);
transform: rotate(-135deg);
}
.square>div{
width: 50px;
height: 50px;
border-radius: 10px;
background: var(--Color);
opacity: 1;
}
.square>div:before{
content: " ";
display: inline-block;
position: relative;
width: 100px;
height: 8px;
background: var(--Color);
background: #000;
z-index: -1;
top: 5px;
left: 5px;
}
The code has two elements both with a before
reaching the other element, this is a simplified version of my problem, but I want to have the before
behind both elements.
There are some other restrictions I need to consider, this should be responsive so I can't get away with a set width so easely. Also, I'm trying to keep it as vanilla as possible.
Edit 1:
I'm want to acheave this effect
You can make each box elements full width in two elements. One side having a higher z-index than the other side and the thin lines. This will give the illusion that you hove one box instead of pseudo elements to make up the entirety of your box element. Adjust the radius of each combining element so it is only on the two corners it needs to be. Adjust the positioning of each absolute element to line up with its corresponding colored half.
-- EDIT: OP asked to have the two black lines below the two box elements --
-- end of edit --
NOTE: I also created divs out of your span elements as a div is a block level element and should not be nested inside SPAN.
My example is just down and dirty but it should illustrate how this illusion can be achieved.