Home/ Questions/Q 8983891
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-15T20:57:17+00:00

I’m trying to code a navigation using irregular (non-rectangle) buttons. The edges overlap each

  • 0

I’m trying to code a navigation using irregular (non-rectangle) buttons. The edges overlap each other on the Y axis so I’m not sure how to do this in HTML/CSS. I could use an imagemap but would rather not. Can someone please point me in the right direction? Thanks! (I included the image link here):

Sample Navigation Image

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Here are some options:

    1. Use a single image with an image map
    2. Use overlaid divs that have CSS rotate transforms applied. Add click handlers to these divs.
    3. Use SVG shapes and apply links to them. I’ve added an example.

    Demonstration: http://jsfiddle.net/Phu5x/

    <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<a xlink:href="/svg/index.html">
   <polygon points="15,10  95, 10  85, 30  5, 30"
        style="fill: red; stroke: black;"/>
 </a>
</svg>
    • 0