Html / html5 z-index rectangle
Is it possible to create the following script using HTML or perhaps HTML5?
In the attached image: "A" is the image overlay. "B + C" - content area.
At the moment I have positioned "A" using an absolute div with a background. The problem is that all lines of "B" (content under blue) are of course behind "A" so no data is available there.
Is there a way to overcome this problem?
+3
source to share
1 answer
You can make a transform-rotate triangle so that it retains its borders and doesn't overlap element B:
DEMO (no vendor prefix)
.wrap{
width:900px;
position:relative;
overflow:hidden;
}
.c, .b{
width:20%;
float:right;
height:200px;
background:gold;
}
.b{
clear:right;
height:400px;
background:teal;
}
.a{
position:absolute;
top:200px; left:0;
width:110%; height:400px;
overflow:hidden;
transform-origin:0 0;
transform: rotate(24deg);
}
.a img{
width:100%;
display:block;
transform-origin:0 0;
transform: rotate(-24deg);
}
<div class="wrap">
<div class="c"></div>
<div class="a"><img src="http://lorempixel.com/output/people-q-c-640-480-8.jpg" alt="" /> </div>
<div class="b"> <a href="#">link</a></div>
</div>
+2
source to share