The Shapes of CSS

Re:The Shapes of CSS by isnotchicago on Monday May 28, 2012 @12:01PM (#4033899)

Any ideas on a fix that works when the triangle must perfectly align with a box? In other words, when the base of the triangle should be the same width as the side of the box it touches. In this case, moving the triangle one pixel closer to the box means it does not fit perfectly against the box.

Example: http://jsfiddle.net/PLMSA/

[ Parent | on HN ]

Re:The Shapes of CSS by alecperkins on Monday May 28, 2012 @01:23PM (#4034187)

Since it's basically a rounding error, I'm not sure if there's any way to avoid the gap without some overlap. In that example, a :before pseudo-element that's the same width as the box and one pixel above the triangle can provide the overlap without needing to offset the triangle itself.

http://jsfiddle.net/enTz9/

[ Parent | on HN ]