Search code examples
csshtmlz-indexcss-shapes

Html / html5 rectangle z-index

Is it possible to create the following scenario using HTML or maybe HTML5 ?

In the attached image: "A" is an image overlay. "B+C" is a content zone.

At the moment i have positioned "A" using an absolute div with a background, The problem is all of "B" (the content beneath the blue)line is of course behind "A" so the data there is inaccessible.

Is there an option to overcome this issue ?

enter image description here

Solution

  • You can make the triangle with transform-rotate so that it keeps it's boundaries and doesn't overlap the B element :

    DEMO(no vendor prefixes)

    .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>