Fluid height triangle

Using linear-gradient 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:before,
.wrap:after {content:""; position:absolute; left:100%; z-index:2; width:50px; height:50%;}

.wrap:before {top:0; background:linear-gradient(to right top, #000 50%, transparent 50%);}
.wrap:after {top:50%; background:linear-gradient(to right bottom, #000 50%, transparent 50%);}

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

.container .wrap {width:auto;}
.red {background:red; overflow: hidden; padding:20px 20px 20px 70px;}


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