Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>This isn't as simple as it seems. Basically, using CSS manipulators for this is tricky and always very limited.</p> <p>However, there is a very alternative method called "<a href="http://www.spiffycorners.com/" rel="nofollow">spiffy</a>". I personally don't use this and for such cases as in your question, I would simply use images. This was my official answer.</p> <p>First spiffy slant menu script I came across was <a href="http://www.cssplay.co.uk/menus/slanty.html" rel="nofollow">Stu Nicholls "Slat Menu"</a>. I styled it as in your example: <strong><a href="http://jsfiddle.net/hobobne/LsVyY/" rel="nofollow">http://jsfiddle.net/hobobne/LsVyY/</a></strong> However, changing the angle of the corners is very very tricky and I basically gave up on that. If you understand the concept, and you choose to use this, then you can invest some time in it. Also, this seems not to work in IE8 (probably not in &lt; IE's either.) So basically it fails.</p> <hr /> <p>Here are some links to some alternative slanted menus related articles:</p> <ul> <li><a href="http://www.kevinleary.net/the-impossible-slanted-diagonal-navigation-setup-with-css-jquery-xhtml/" rel="nofollow">The Impossible Slanted, Diagonal, Navigation Setup with CSS, jQuery &amp; XHTML</a></li> <li><a href="http://www.dynamicdrive.com/style/csslibrary/item/slanted-divider-menu/" rel="nofollow">Slanted Divider Menu</a></li> <li><a href="http://www.useragentman.com/blog/csssandpaper-a-css3-javascript-library/" rel="nofollow">cssSandpaper – a CSS3 JavaScript Library</a></li> </ul>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload