非矩形下拉菜单

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;
}