Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Centering CSS Triangle on Hover

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #38523
    dtrick
    Member

    Hi there,
    I’m messing around with a hover effect that involves CSS triangles. In my fiddle, you’ll see the triangles appear :after my li tags. To the untrained eye, they may look centered, but a closer look shows they are a few pixels off. Any thoughts on getting this perfected? I’ve been messing with it for a couple days now and I can’t quite wrap my head around a solution. Thanks !

    http://jsfiddle.net/deitrick/ytgs8/1/

    #104477
    Xiris
    Member

    Here’s a solution: http://jsfiddle.net/ytgs8/8/

    The “left” positioning attribute on the :after pseudo element positions the left edge of your triangle 50% inwards from the border of your anchor element. You then apply a negative margin of half the width of the triangle (20px / 2 = 10px). The margin that was being used was -13px, which positions the triangle approximately ~3px (variable on whether or not your anchor element is of even pixel width) to the left of center. A margin of -10px positions the 20px wide triangle in the center of your anchor element. Though, again, if you’re anchor element has an odd pixel width, then the triangle can’t be perfectly centered.

    Long story short, your negative margin on the triangle wasn’t quite right.

    #104478
    dtrick
    Member

    That’s brilliant. Thanks for the help and detailed explanation.

Viewing 3 posts - 1 through 3 (of 3 total)
  • The forum ‘CSS’ is closed to new topics and replies.