- This topic is empty.
November 23, 2012 at 4:19 pm #40956DriftingStepsMember
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 24, 2012 at 10:23 pm #115365DriftingStepsMember
So? There is no solution to this?November 25, 2012 at 3:36 am #115397
Nope…not without images.November 25, 2012 at 3:51 am #115399
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;
}November 25, 2012 at 4:01 am #115400
then you can align it with the absolute positioning and make it appear/dissappear with
clip: rect(0 0 0 0); height: 1px;
}November 25, 2012 at 4:04 am #115401
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?November 25, 2012 at 4:09 am #115405
what is the width of the li declared in?November 25, 2012 at 4:10 am #115406
percentage?November 25, 2012 at 4:11 am #115407
If you don’t know the width of the li your only option is to use a width of 100% for the border and that doesn’t work.November 25, 2012 at 4:13 am #115408
you could also create a separate li and make it animate into place.
November 25, 2012 at 4:14 am #115409
The width of the li isn’t declared at all….it has the width of each ‘a’ + padding.
As the ‘a’ doesn’t have a set width…you don’t know the width of the li.November 25, 2012 at 4:14 am #115410
it didnt like my codeNovember 25, 2012 at 4:15 am #115411
>you could also create a separate li and make it animate into place. like item triangle
…but you still don’t know how wide to make the triangle….and it’s unsemantic markup used for styling which properly belongs in the css.November 25, 2012 at 4:15 am #115412
> it didnt like my code
Use Codepen….it’s easier for the rest of us to look at.November 25, 2012 at 4:15 am #115413
do you have a pen already started?
If you start one I will try to help.
- The forum ‘CSS’ is closed to new topics and replies.