Normally there are 2 ways of making a triangle in css: border and linear-gradient.
I created two jsfiddle files to show that:
Border:
http://jsfiddle.net/quiz1991/f8777/2/
Linear-gradient:
http://jsfiddle.net/quiz1991/3um3L/
Border version is easier with less calculation than Linear-gradient version(especially when u use weird degrees other than the common 30, 45, 60, 90 in linear-gradient), but less flexiblity.
PS: attached is the bubble I created:
http://jsfiddle.net/quiz1991/3JL5g/1
Using absolute position is kinda risky, but since it's related to the black triangle, this solution is way better than use both :after and :before and absolute position to "draw" both those triangles as showed in the above fiddle file(the third li element).
I created two jsfiddle files to show that:
Border:
http://jsfiddle.net/quiz1991/f8777/2/
Linear-gradient:
http://jsfiddle.net/quiz1991/3um3L/
Border version is easier with less calculation than Linear-gradient version(especially when u use weird degrees other than the common 30, 45, 60, 90 in linear-gradient), but less flexiblity.
PS: attached is the bubble I created:
http://jsfiddle.net/quiz1991/3JL5g/1
Using absolute position is kinda risky, but since it's related to the black triangle, this solution is way better than use both :after and :before and absolute position to "draw" both those triangles as showed in the above fiddle file(the third li element).
No comments:
Post a Comment