这种渐变建议不要用CSS了，兼容性问题，
其实你可以把所有的图PS成一张，有文字和连接的部分加个透明背景的DIV，用CSS定位就行了。
CSS3可以旋转DIV，-webkit-transform: rotate(45deg);
不过IE好象是不支持，可以网上查一下IE旋转问题。
还有一个解决方案，把所有的图P成一张大图，使用图片映射，点击某个区域，就跳到指定的页面，你可以参考下面这段代码：
请点击图像上的星球，把它们放大。
src="
border="0" usemap="#planetmap"
alt="Planets" />
shape="circle"
coords="180,139,14"
href ="/example/html/venus.html"
target ="_blank"
alt="Venus" />
shape="circle"
coords="129,161,10"
href ="/example/html/mercur.html"
target ="_blank"
alt="Mercury" />
shape="rect"
coords="0,0,110,260"
href ="/example/html/sun.html"
target ="_blank"
alt="Sun" />
注释：img 元素中的 "usemap" 属性引用 map 元素中的 "id" 或 "name" 属性（根据浏览器），所以我们同时向 map 元素添加了 "id" 和 "name" 属性。
