Create a triangular div using css transformation and jquery -

i'm trying create triangular 'div' need enter text , backrgound image covers whole 'div'.

i tried make using css , jquery (i used jquery 'triangular-element' touch 3 vertices of 'triangular-corner')

the result good, 'triangular-content' not centered within it.

i've applied inverse transformation 'triangular-content' in order un-rotated after can't centered within parent element.

http://jsfiddle.net/simonepri/c6aukfzj/1/

i've create snippet show problem.

if change page can see yellow area ('triangular-content') not cover whole black div ('triangular-element'). here image show problem: http://i.stack.imgur.com/dyjcj.jpg how can center yellow div???

$( window ).ready(function() {    var angle = math.atan($(".triangle-corner").height()/$(window).width());    $(".triangle-element").css("transform", 'rotate(' + -angle + 'rad)');    $(".triangle-content").css("transform", 'rotate(' + angle + 'rad)');  });     $( window ).resize(function() {    var angle = math.atan($(".triangle-corner").height()/$(window).width());    $(".triangle-element").css("transform", 'rotate(' + -angle + 'rad)');    $(".triangle-content").css("transform", 'rotate(' + angle + 'rad)');  });

#what-i-do {    width: 100%;    height: 600px;  }  #wid-designer {    width: 100%;    height: 40%;  }    .triangle-corner {    position: relative;    overflow: hidden;    width:100%;    height: 100%;  }  .triangle-element {    position: absolute;    overflow: hidden;    transform-origin: 100% 100%;    height: 100%;    width: 150%;    background-color: #000;    right: 0px;    top:-100%;  }  .triangle-content {    position: absolute;    overflow: hidden;    transform-origin: 100% 100%;    height: 100%;    width:  66.666666666666666666%;    background-color: #ff0;    right: 0px;    color: #ffffff;    top:100%;    font-size: 40pt;  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <article id="what-i-do">		<!-- 1 -->    <section id="wid-designer">      <div class="triangle-corner"><div class="triangle-element"><div class="triangle-content">          yellow div need fill balck div , need centered (0 margin in direction)  	</div></div></div>    </section>  </article>

thanks.

edit: question not duplicate of: css triangle containing text use css hack (border-color) in order create trinagle cannot styled background-image , background-position.

fiddling little css values left, top, width , padding-left got me yellow triangle:

http://jsfiddle.net/hbpnam7e/

the main issue seemed use of:

width:  66.666666666666666666%;