45 度角 + Box Shadow - 只使用 CSS

Question

我需要仅使用 CSS 重新创建以下设计：

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

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

郑重声明：我不想使用图像，因为倾斜上的框阴影与浏览器渲染的框阴影匹配的可能性很小，尤其是在使用多个浏览器时。

我正在思考具有白色背景和盒子阴影的定位和旋转 div 的思路，但我还无法构建它。

有什么想法吗？

Answer 1

有一种东西叫做砂纸< /a> 可以帮助您转换元素，即使在 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就不会被破坏并且可以达到相同的结果。

Answer 2

对于旋转，您需要：

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

请记住，旋转是 CSS3 属性，因此您不会在所有浏览器中获得相同的行为。与其仅用图像进行倾斜，不如重新创建整个轮廓可能会更好。我会用以下方法来处理它：

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

您还可以使用外部库来尝试重新创建 CSS3 属性，但图像可能是最简单的方法，因为您知道它们将如何呈现。

Answer 3

我认为您可以使用 http://nicolasgallagher.com/pure-css- 中的技术voice-bubbles/demo/

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

PS：它比 CSS3 转换更安全。

Answer 4

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

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

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