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?
hey why dont you just use :after on the li element
border-top: .2em solid grey;
border-left: .2em solid transparent;
border-right: .2em solid transparent;
then you can align it with the absolute positioning and make it appear/dissappear with
clip: rect(0 0 0 0); height: 1px;