Flexible triangles using borders?

[DriftingSteps]

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.

[DriftingSteps]

So? There is no solution to this?

[Paulie_D]

Nope…not without images.

[jwebcat]

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: “”;
}

[jwebcat]

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;
}

[Paulie_D]

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?

[jwebcat]

what is the width of the li declared in?

[jwebcat]

percentage?

[Paulie_D]

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.

[jwebcat]

you could also create a separate li and make it animate into place.
like

• item

  • triangle

[Paulie_D]

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.

[jwebcat]

it didnt like my code

[Paulie_D]

>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.

[Paulie_D]

> it didnt like my code

Use Codepen….it’s easier for the rest of us to look at.

[jwebcat]

do you have a pen already started?
If you start one I will try to help.

[Author]

Posts