CSS3 triangles are great – they can be used to add a lot of spice to a design or elements that would other wise be flat and boring. However, they also come with one or two problems: mainly that borders don’t accept percentages. SO, if you would like to add triangles to elements of varying heights or widths and have the triangles match the parent elements, you’re going to have a heck of a time guessing at the right size.
However, you can use jQuery to dynamically adjust the various widths or heights and get the effect that you’d like. In this quick tutorial I’m going to use a recent example that we ran into – we wanted to have little roofs on top of all of the navigation items for a recent client. The obvious problem there is that all of the nav items are different widths and if the client ever swapped out an item or changed the name of a page, the width would change again. Therefore we needed truly dynamic triangles.
Primer on css triangles
CSS triangles are a little tricky so let’s begin there.
[cc lang=”css”]
.parent{
position:relative;
}
.triangle{
width:0px;
height:0px;
border-style:solid;
border-width:0 40px 20px 40px;
border-color: transparent transparent #000000 transparent;
position:absolute;
top:-20px;
left:0;
}
[/cc]
Let’s dissect this real quick. The height and width are both 0, meaning that the border widths are handling the actualdimensions of the triangle. The triangle in this example will give you a shape similar to a roof, like the image to the right. We’re also using position:relative; to place the triangle above the .parent element. This is my preferred method as it allows you to place your parent element closer to other items.
As we mentioned above, the biggest weakness here is that we can’t use a % declaration in the border-widths. SO, we’ll have to use some jQuery to grab the width of the parent element and adjust the border-widths on the fly.
The jQuery
[cc lang=”javascript” escaped=”true” tab_size=”4″]
<script>
jQuery(document).ready(function($){
jQuery(‘.parent’).each(function(){
var self = $(this),
width = (self.width() / 2);
self.prepend(“<div class=\”triangle\”></div>”);
$(‘.triangle’, self).css({
‘border-left-width’ : width,
‘border-right-width’ : width
});
});
});
</script>
[/cc]
(as a note, we got the bulk of this script from: https://stackoverflow.com/questions/8659432/setting-the-border-width-of-a-after-pseudo-element-based-on-the-parent-element)
Here, we’re accomplishing two things: first we’re inserting a div with the class of “triangle” into our parent element, and we’re also changing the left and right border widths based on the current size of the element. Now, obviously we put in our example class of .parent int, but you can target any valid CSS selector (except for pseudo elements). In our working site, we used .nav>ul>li for example to target our WordPress main navigation.
After this, you’ll have some killer css triangles that will change accordingly to your parent element!