非矩形下拉菜单

Question

我必须实现下面的非矩形下拉菜单。 （见图片）

http://postimg.org/image/fmzro5rfl/

它需要与IE8及以上工作。鼠标悬停时，每个梯形产品图标div都会高亮显示。

我应该使用图像映射，CSS Sprites还是CSS转换来实现？

• 我可以使用PNG如果需要
• 我不介意额外的辅助库只是为了应付IE8/9

谢谢！

Answer 1

尝试这样的事情 - http://jsfiddle.net/ad9Bj/

HTML：

<div> 
    <ul> 
     <li>item 1</li> 
     <li>item 2</li> 
     <li>item 3</li> 
    </ul> 
</div> 

CSS：

div { 
    background: orange; 
    overflow: hidden; 
} 
ul li { 
    float: left; 
    list-style: none; 
    margin-right: 20px; 
    padding-left:40px; 
    padding-right:40px; 
    padding-top:5px; 
    padding-bottom:5px; 
    color: #fff; 
} 
ul li:hover { 
    background: url('http://i.imgur.com/ZV01sGZ.png') no-repeat; 
}