Flexible triangles using borders?
# November 23, 2012 at 4:19 pm
Greetings everyone (:
I came up with a design issue where there’s a banner-like background on a [navigation](http://prntscr.com/kf038 “navigation”) (the red one). Now I usually tend to create a CSS/CSS3 version of almost every graphics in a design and I was hoping this was the same – until I realized that this was a navigation, and I just couldn’t use borders to create the triangles on the bottom. I tried giving percent for the borders’ width, but it doesn’t work. I **can** use background-images, but then that would mean multiple images (even in a sprite) and if _in case_ I have to add more links, I have to draw more images.
Do you think it’s possible to recreate that completely with CSS?
Thanks.# November 25, 2012 at 4:04 am
It doesn’t work because the width of the li is not fixed and so you can’t set a top/bottom border width for the pseudo element either.
A pseudo element would be the way to go but it will need a background image of some kind….one that scales appropriate to the size of the element.
Perhaps playing with background-size?
You must be logged in to reply to this topic.