Grow your CSS skills. Land your dream job.

Limiting the size of a div hyperlink

  • # February 15, 2013 at 11:07 am

    Hi,
    I’ve created a small way to to show things on my portfolio, using a “pie chart” created in CSS by hiding corners and rounding them to make rounded triangles.

    Each section of the pie chart I am wanting to be a hyperlink to somewhere else, but the problem is that the hyperlink extends over to the portions that are transparent, I’ve tried limiting the “a” tags to a width and height (just to see what would happen), it made no difference.

    code pen: http://codepen.io/Wymer/pen/BJCHu

    At the moment only the yellow is set as a hyperlink, but if you mouse-over you can see the whole thing is a hyperlink, not just the yellow section.

    # February 15, 2013 at 11:42 am

    Border-radius is an illusion, the element is still a rectangle.

    Perhaps with a set of overlaid divs (with a rotate transform) and z-index?

    # February 15, 2013 at 1:32 pm

    I didn’t think of doing overlays to fit them for links. Thanks.

    Now just a solution on how to add “a:hovers” so people can read the categories..

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".