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*/
}

感谢乔希和罗伯特的歌剧等同：

-o-transform: rotate(45deg);

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

Answer 2

轮换时，您正在寻找：

-moz-transform:rotate(45deg);
-webkit-transform:rotate(45deg);

请记住，旋转是CSS3属性，因此您不会在所有浏览器中获得相同的行为。而不是仅仅使用图像倾斜，重建整个轮廓可能会更好。我接近它：

1. 标题部分，内容顶部有倾斜，阴影，菜单背景和填充，非常类似于你的屏幕截图。
2. 可以用阴影在整个内容中重复的图像。
3. 页脚部分。

您也可以使用外部库来尝试重新创建CSS3属性，但是当您知道它们将如何渲染时，图像可能是最简单的方式。

Answer 3

我认为您可以使用http://nicolasgallagher.com/pure-css-speech-bubbles/demo/

中的技巧

这是一个非常好的汇编和使用CSS的灵感。享受。

PS：它比CSS3转换更安全。

Answer 4

旋转似乎没必要。我会尝试使用CSS三角效果。

我将假设您的链接位于ul，因此您的CSS可以选择ul:before并使其形状正确。

我不知道box-shadow会发生什么，但它可能值得一试，并且可能更容易在IE中对齐而不需要使用JavaScript。