jquery - Creating responsive triangles with CSS -

i trying create triangles in css responsive site today , couldn't find example on stackoverflow, here's how did it.

making angular shapes responsive little tricky because can't use percentages border values in css, wrote couple functions calculate page width , resize triangle accordingly. first calculates size on loading page, second recalculates size page width changes.

css:

.triangle {     width: 0;     height: 0;     border-top: 50px solid rgba(255, 255, 0, 1);     border-right: 100px solid transparent; } 

html:

<div class="triangle"></div> 

js:

$(document).ready(function () {     var windowwidth = $(window).width();     $(".triangle").css({         "border-top": windowwidth / 2 + 'px solid rgba(255, 255, 0, 1)'     });     $(".triangle").css({         "border-right": windowwidth / 1.5 + 'px solid transparent'     }); });  $(window).resize(function () {     var windowwidthr = $(window).width();     $(".triangle").css({         "border-top": windowwidthr / 2 + 'px solid rgba(255, 255, 0, 1)'     });     $(".triangle").css({         "border-right": windowwidthr / 1.5 + 'px solid transparent'     }); }); 

here's jsfiddle - http://jsfiddle.net/craigcannon/58dvs/17/