I came up with a design issue where there's a banner-like background on a 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
like:
li:after {
position: absolute:
border-top: .2em solid grey;
border-left: .2em solid transparent;
border-right: .2em solid transparent;
content: "";
}
then you can align it with the absolute positioning and make it appear/dissappear with
.visuallyhidden {
border: 0;
clip: rect(0 0 0 0); height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
Greetings everyone (:
I came up with a design issue where there's a banner-like background on a 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.
So? There is no solution to this?
Nope...not without images.
hey why dont you just use :after on the li element like: li:after { position: absolute: border-top: .2em solid grey; border-left: .2em solid transparent; border-right: .2em solid transparent; content: ""; }
then you can align it with the absolute positioning and make it appear/dissappear with .visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }
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?
what is the width of the li declared in?
percentage?
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.
you could also create a separate li and make it animate into place. like
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.
it didnt like my code
...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.
Use Codepen....it's easier for the rest of us to look at.
do you have a pen already started? If you start one I will try to help.
Nope.
feelings below.. -_-
I am left with the feeling of yes this must be able to be done with only CSS. Is it worth it? Maybe not.
As I thought....if you have a single triangle image (which I don't have right now), it can be done as a bg image.
http://codepen.io/Paulie-D/pen/ixKLf
Notice the image maintains a set height and is still a full image but the image is stretched horizontally according to need.
http://codepen.io/wolfcry911/pen/yiBhK
Nicely done, @wolfcry911!
Odd...it's not working for me in Chrome.
It seems that Chrome (possibly webkit) doesn't support linear gradients specified with a "to bottom right" angle (even with the -webkit prefix).
It doesn't yet, but will soon. The life of a web developer :p