Как на CSS сделать блоки «нестандартной» (не прямоугольной) формы?

Question

[Дмитрий]

Есть дизйн для верстки, в котором блоки-ссылки имеют нестандартную форму:

Если делать ссылки прямоугольными блоками, то как видно на этом скрине:

зоны ссылок пересекаются и кликабелен будет блок, который сверху в стопке слоев.
Можно ли как-то сделать блоки не прямоугольной формы, как тут:

Answer 1

[ukoHka]

htmlbook.ru/html/map

Answer 2

[Sergej]

habrahabr.ru/post/126207
http://photo.smelkov.com/content/наклонный-div-сре...
jsfiddle.net/homm/DxBrq

Answer 3

[GreatRash]

Интерактивный туториал: там вверху жмите кнопку "Next Step"

Answer 4

[A K]

У SVG преимущества перед мэп ареа, например :hover
jsfiddle.net/Symphony/s1qr1auy

Comments

[Дмитрий]

Так а разве SVG может быть ссылкой??

[A K]

battrack: да, вариантов куча как это сделать
jsfiddle.net/Symphony/s1qr1auy — вот один