triangle

by mgrassotti

HTML

<div id="wrapper">
  <p>pitch goes here</p>
  <div id="triangle1"></div>
  <div id="triangle2"></div>
</div>

CSS

/* 
#FF5335
#B39C85
#306E73
#3B424D
#1D181F

*/

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
}
#wrapper {
    height: auto;
    width: 100%;
    min-height: 100%;
    background-color: white;
}
#triangle1 {
    position: absolute;
    bottom: 0;
	width: 0;
	height: 0;
	border-top: 100px solid #FF5335;
	border-left: 100px solid #3B424D;
}

JavaScript

function triangle() {
    var width = $('#wrapper').width()
    var height = $('#wrapper').height()
    var el = $("#triangle1")
    el.css('border-top-width', height);
    el.css('border-left-width', width);
    console.log(width, height);
}

$(window).resize(function(){
    triangle();
});

triangle();