How to implement oblique menu items on the site This menu is from the game.

  • <map> <area> as an option. - mJeevas

2 answers 2

In short, use transform: skew()

Codepen example

 body { font-family: Helvetica Neue, Helvetica, sans-serif; background: tomato; } .skew-menu { text-align: center; margin-top: 9em; } .skew-menu ul { display: inline-block; margin: 0; padding: 0; list-style: none; transform: skew(-25deg); } .skew-menu ul li { background: #fff; float: left; border-right: 1px solid #eee; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); text-transform: uppercase; color: #555; font-weight: bolder; transition: all 0.3s linear; } .skew-menu ul li:first-child { border-radius: 7px 0 0 7px; } .skew-menu ul li:last-child { border-right: none; border-radius: 0 7px 7px 0; } .skew-menu ul li:hover { background: #eee; color: tomato; } .skew-menu ul li a { display: block; padding: 1em 2em; color: inherit; text-decoration: none; transform: skew(25deg); } 
 <nav class="skew-menu"> <ul> <li><a href="#">Shoes</a></li> <li><a href="#">Sandals</a></li> <li><a href="#">Shirts</a></li> <li><a href="#">Jackets</a></li> </ul> </nav>

    via transform: skewX(-20deg); The menu items you have most likely li , give him a transform: skewX(-20deg); . And on the element with the text transform: skewX(20deg); so you align the text. Just do not give transform: skewX(20deg); on the <а> tag, because the corners will press the adjacent button