bramhaag bramhaag - 1 month ago 15
CSS Question

Diagonal div with image

I'm trying to achieve a similar result to this

Preferably the black and blue parts are separate divs, because what I'm trying to achieve will otherwise be very hard/impossible. The HTML code would look something like

<div class="diagonal">
<div class="diagonal-black"></div>
<div class="diagonal-blue"></div>
</div>


Thanks,

Bram

Answer

Using borders on a pseudo-element:

.diagonal {width:700px; height:200px;}
.diagonal-black {float:left; background:black; width:50%; height:200px;}
.diagonal-blue {float:right; background:blue; width:50%; height:200px; position:relative;}
.diagonal-blue:after {position:absolute; content:""; width:0; top:0; left:-50px; height:0; border-bottom:200px solid transparent; border-right:50px solid blue;}
<div class="diagonal">
    <div class="diagonal-black"><img src="https://placekitten.com/350/200" alt="" /></div>
    <div class="diagonal-blue"></div>
</div>