Recently, I stumbled upon the interesting concept of CSS triangles created using element borders. I decided to incorporate this design into one of my custom Wordpress themes, but I encountered a problem. I wanted to add a triangle at the bottom of a div, like a banner, but the div contained user-set text which made it impossible to hard code the width of the box and the triangle. My solution was to use jQuery to dynamically adjust the triangle size based on the parent div's width. However, while attempting to set the borders according to half the total parent width, I noticed that the box would resize as elements loaded (mainly due to slow font loading). I wrapped the script to trigger on element resize, but it didn't seem to work properly. This resulted in the triangle appearing larger than the box it was meant to be under. You can observe this issue here:
Here is the code snippet:
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 also experimented with the .change() function, but it didn't yield the desired effect. Any insights on what might be causing this content jump or why the function isn't triggering? I suspect it could be related to the inline block display property, but I'm unsure how to resolve it since display:inline-block is essential for the correct display of the div.