Fluid height triangle

Using SVG background to recreate triangle

by oilvier

HTML

<div class="container">
    <div class="grids grids-flush">
        <div class="grid-1-2">
            <div class="wrap"></div>
        </div>
        <div class="grid-1-2">
            <div class="wrap red">
                <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam euismod malesuada vulputate. Pellentesque non dui eget justo tincidunt vulputate eu sollicitudin elit. Suspendisse sit amet ante in diam semper commodo dapibus vel elit. Etiam mollis tincidunt sollicitudin. Integer eu nisl blandit, tristique leo condimentum, commodo ipsum. Cras iaculis eu odio ut lobortis. Nunc et auctor erat, at blandit sem. Suspendisse eu est ultricies, congue neque ac, rhoncus erat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla a lectus nisl. Phasellus tellus ipsum, luctus eget augue eget, efficitur hendrerit orci. </p>
            </div>
        </div>
    </div>
</div>
    
        
 <div class="wrap">
</div>

CSS

* {padding:0; margin:0; box-sizing:border-box;}
html, body {height:100%; color:white;}

.wrap {width: 50%; height:200px; position: relative; background:black;}
.wrap:after {content:""; position:absolute; top:0; left:100%; z-index:2; width:100px; height:100%; background:url(http://comastr.io/stuff/test3.svg) no-repeat right center; background-size:100% 100%;}

.container {height:100%; position: relative; background:red;}
.container > div,
.container > div > div,
.container > div > div > div {height:100%;}

.container .wrap {width:auto;}
.red {background:transparent; /*Important pour Chrome*/ overflow: hidden; padding:20px 20px 20px 120px;}


/* Grid
================ */
/**
 * Système de grille fluide (%age)
 * Le parent `grids` ne peut contenir que des `grid-*` comme enfants
 * L'unité "grid" doit obligatoirement commencer par une class `grid-*`
 * OK
 <div class="grids">
 	<div class="grid-1-2"></div>
 </div>
 **********
 * Pas OK
 <div class="grids">
 	<h2>Titre</h2>
 	<div class="grid-1-2"></div>
 </div>
 **********
 * Pas OK 
 <div class="grids">
 	<div class="box-border grid-1-2"></div>
 </div>
 * Les imbrications sont possibles, en gardant la même structure `.grids>.grid-*`
 <div class="grids">
 	<div class="grid-1-2">
 		<div class="grids">
 			<div class="grid-1-3"></div>
 			<div class="grid-1-3"></div>
 			<div class="grid-1-3"></div>
 		</div>
 	</div>
 	<div class="grid-1-2"></div>
 </div>
 */
.grids {margin-left:-20px; letter-spacing:-0.31em;
	/* Corriger le problème avec les polices non web-safe */
	font-family: FreeSans, Arimo, "Droid Sans", Helvetica, Arial, sans-serif;}
.opera:-o-prefocus, .grids {word-spacing: -0.43em; /* Fix for Opera */}
	/* La classe doit absolument commencer par .grid- */
	[class^="grid-"] {padding-left:20px; width:100%; display: inline-block; vertical-align: top; word-spacing:normal; letter-spacing:normal;}

/* Grille sans marge */
/* .grids */.grids-flush {margin-left:0;}
	.grids-flush > [class^="grid-"]...