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 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 :)
You must be logged in to reply to this topic.