45度角+盒子阴影 - 只使用CSS

Question

我只需要使用以下方法重新创建以下设计CSS:

您在图片中看到的是网站容器的顶部 - "链接"是主菜单的一部分.

就目前而言,我已经创建了容器,但我不确定如何在不使用图像的情况下在导航上进行倾斜.

为了记录:我宁愿不使用图像,因为倾斜的盒子阴影与浏览器呈现的盒子阴影相匹配的可能性很小,尤其是涉及多个浏览器时.

我正在思考一个带有白色背景和盒子阴影的定位和旋转div的线条,但我还没有能够构建它.

有任何想法吗？

Answer 1

有一种叫做Sandpaper的东西可以帮助你改变你的元素,即使在IE中也是如此!

.myDiv {
    -sand-transform: rotate(45deg);
}

您只需将其插入您的网站即可.

您也可以使用CSS3转换,您在问题中询问:"只使用CSS."

要做到这一点你要使用:

 .myDiv {
    -webkit-transform: rotate(45deg); 
    -moz-transform: rotate(45deg);  
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=5); /*for IE*/
}

感谢Josh和Robert对Opera的等价:

-o-transform: rotate(45deg);

Internet Explorer将在已应用过滤器的任何文本上删除ClearType.但是您可以在主要元素中添加空的额外元素,并将滤镜应用于此额外元素.在此之后,ClearType不会被破坏,并且可以实现相同的结果.