Triangle shape in the menu

[botpro7]

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.

[pixelgrid]

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

[botpro7]

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”)

[Merri]

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

[botpro7]

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… :)

[Merri]

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 :)

[botpro7]

Solved, thousands thanks Merri.

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

[Author]

Posts