The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern

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]( “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?


    # November 24, 2012 at 10:23 pm

    So? There is no solution to this?

    # November 25, 2012 at 3:36 am

    Nope…not without images.

    # November 25, 2012 at 3:51 am

    hey why dont you just use :after on the li element
    li:after {
    position: absolute:
    border-top: .2em solid grey;
    border-left: .2em solid transparent;
    border-right: .2em solid transparent;
    content: “”;

    # November 25, 2012 at 4:01 am

    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;

    # 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?

    # November 25, 2012 at 4:09 am

    what is the width of the li declared in?

    # November 25, 2012 at 4:10 am


    # November 25, 2012 at 4:11 am

    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

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

    • item

      • triangle

    # November 25, 2012 at 4:14 am

    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

    it didnt like my code

    # November 25, 2012 at 4:15 am

    >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

    > 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

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

Viewing 15 posts - 1 through 15 (of 24 total)

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed