- This topic is empty.
-
AuthorPosts
-
April 21, 2013 at 3:58 am #44281botpro7Member
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 #132559pixelgridParticipantcan 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
April 21, 2013 at 5:46 am #132564botpro7MemberHi 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 #132570MerriParticipantThis 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 #132586botpro7Membercool!, 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 #132588MerriParticipantYou 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 #132590botpro7MemberSolved, thousands thanks Merri.
Ok i will play around with the css u gave me. I’ll understand eventually.
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.