html - Responsive CSS triangles jQuery not working -

so, funny is, found concept of css triangles using element borders. i'm trying implement in 1 of custom wordpress themes, , i'm running issue. i'm trying add triangle bottom of div (kind of banner), div contains text can set user, can't hard code width of box , triangle. led me jquery try box width, , resize triangle appropriately. when first tried simple script set both borders half total parent width, seems ran issue box resizing elements load (seems slow font loading). wrapped script fire on element resize, doesn't seem triggering. causing triangle stay larger box it's under. can see effect here:

http://dev3.thoughtspacedesigns.com

here's code:

html

<div id="logo-box">     <h1><?php bloginfo('name'); ?></h1>     <div id="logo-box-point"></div> </div> 

css

#logo-box{     background:#374140;     display:inline-block;     padding:20px;     position:relative; }  #logo-box h1{     color:#f2f2f2; }  #logo-box-point{     content: ' ';     width:0px;     height:0px;     border-left: 0px solid transparent;     border-right: 0px solid transparent;     border-top:25px solid #374140;     border-bottom:0;     position:absolute;     bottom:-25px;     left:0px;     z-index:2; } 

jquery

$(function(){     function trianglesize(){             var logoboxwidth = $("#logo-box").width();             $("#logo-box-point").css({"border-left-width":logoboxwidth/2, "border-right-width":logoboxwidth/2});     }     trianglesize();     $("#logo-box").resize(function(){             trianglesize();     }     ); } ); 

i tried using .change() function, no effect. ideas on what's causing content jump, or why function isn't firing? have suspicion has display inline block piece, i'm @ loss on how fix display:inline-block way div display correctly.

resize wont fire on element that, use:

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

http://jsfiddle.net/tdcud/

note: code didn't seem account padding of div either, i've done in fiddle.