A request has come in from a client asking for a unique image slider that is quadrilateral in shape, but not rectangular. The slider should only occupy half of the page and should not overlap the content on the right side. An example of what is needed can be seen below:
Initial Attempt
An attempt has been made to create this JSFiddle demo that utilizes borders to create a cut-off effect at the bottom right corner. The code consists of two parts: #intro-bottom-left representing the foreground and #intro-bottom-left-back representing the background (which generates the border effect along the right side).
HTML
<section id="intro">
<div id="intro-bottom">
<div id="intro-bottom-left-back"></div>
<div id="intro-bottom-left"></div>
</div>
</section>
CSS
#intro-bottom-left {
height: 0;
width: 0;
position: absolute;
top: 0;
left: 0;
border-top: 410px solid white;
border-right: 153px solid transparent;
border-left: 211px solid white;
}
#intro-bottom-left-back {
height: 0;
width: 0;
position: absolute;
top: 0;
left: 0;
border-top: 410px solid black;
border-right: 154px solid transparent;
border-left: 212px solid black;
}
The demo has been created on a smaller scale to fit the JSFiddle result UI area. This setup results in:
It is worth noting that the body has been given a grey background to illustrate that it remains unaffected by this design.
The Issue
The client specifically requires that this design is functional on IE8, which eliminates the possibility of utilizing the CSS3 border-image property or implementing CSS3 2D Transformations for image and container modifications.
The challenge now is to add an <img /> element on top of this design that does not overflow the shape boundaries and does not obscure any content on the right side. Since the #intro-bottom-left container relies solely on borders for its dimensions, simply adding an image and setting the container to overflow: hidden will not produce the desired effect.
With the following markup (JSFiddle), how can the image be displayed similar to the initial example at the top without overlapping any content on the right side?
<div id="intro-bottom-left">
<div class="slide">
<img src="http://placehold.it/500x500" />
</div>
</div>