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

Question

我需要仅使用 CSS:

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

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

为了记录：我宁愿不使用图像，因为倾斜的盒子阴影的机会与浏览器呈现的盒子阴影匹配的机会很小，尤其是在多个浏览器方面。

我在沿着带有白色背景和盒子阴影的位置和旋转的div的线路思考，但我还没有构建它。

有任何想法吗？

Answer 1

有一个叫做的东西 砂纸 即使在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的同等歌剧：

-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-spech-bubbles/demo/

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

PS：比CSS3变换更安全。

Answer 4

旋转似乎是不必要的。我会尝试使用CSS三角效应。

我要假设您的链接在 ul 因此您的CSS可以选择 ul:before 并使其成正确的形状。

我不知道会发生什么 box-shadow 但这可能值得一试，并且在不诉诸JavaScript的情况下，可能会更容易对齐。