Grow your CSS skills. Land your dream job.

Triangle shape in the menu

  • # April 21, 2013 at 3:58 am

    Hi guys, i’m curious how to make a [Triangle](http://i1287.photobucket.com/albums/a628/botpro7/Triangle_zps314145ec.png “Triangle”) shape in the menu?

    Thanks in advanced.

    # April 21, 2013 at 4:21 am

    can be done with a psedo element (:before or :after ) with a triangle or a rotated square. if you want to drop a shadow you should go with the rotated square approach

    http://codepen.io/anon/pen/iEvDn

    # April 21, 2013 at 5:46 am

    Hi Pixelgrid, i’m combining the CSS that you gave me with JQuery, but i found out strange behaviour with the pseudo elements.

    [http://codepen.io/botpro7/pen/lhrdw](http://codepen.io/botpro7/pen/lhrdw “codepen”)

    # April 21, 2013 at 7:07 am

    This issue relates to how draw context is handled in browsers when opacity is applied. Due to this the element is drawn as if it had z-index even when it is set to 0 and this also effects the pseudo element that has a negative z-index (so it shouldn’t appear when the parent element’s z-index is 0).

    Long story short: give `z-index: 1;` to `div#show` and problem fixed.

    Also: [had a bit of fun with this](http://codepen.io/Merri/pen/fLnmw). I used a different method to create the triangle (border-width).

    # April 21, 2013 at 8:24 am

    cool!, thanks Merri. The triangle now can be shown using FF & IE, but Google chrome displays the pseudo element (:before) as a [square](http://i1287.photobucket.com/albums/a628/botpro7/Square_zps3daa5312.png “square”) instead of triangle. Any idea to fix this?

    Thanks for your reference using another method for creating the triangle, still digesting… don’t know how it works… :)

    # April 21, 2013 at 8:31 am

    You probably have an older version of Chrome at the moment, most recent version should work. However you can add this rule before the existing transform rule: `-webkit-transform:rotate(145deg) skew(20deg);` ie. basically duplicate the real transform rule.

    You can make things slightly easier to understand by removing z-index from the pseudo element and also by setting it’s background to red or other color that makes it easier to see where the element is. Playing around is the best way to learn :)

    # April 21, 2013 at 8:39 am

    Solved, thousands thanks Merri.

    Ok i will play around with the css u gave me. I’ll understand eventually.

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".