18

我只需要重新创建以下设计CSS：

图片

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

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

作为记录：我宁愿不使用图像，因为倾斜的盒子阴影与浏览器渲染的盒子阴影相匹配的机会微乎其微，尤其是在涉及多个浏览器时。

我正在考虑具有白色背景和框阴影的定位和旋转 div，但我还没有能够构建它。

有任何想法吗？

4

4 回答 4

27

有一种叫做砂纸的东西可以帮助你转换你的元素，即使在 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 就不会被破坏，也可以达到同样的效果。

于 2010-11-05T12:26:37.273 回答
1

对于旋转，您正在寻找：

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

请记住，旋转是 CSS3 属性，因此您不会在所有浏览器中获得相同的行为。与其只用图像制作倾斜，不如重新创建整个轮廓。我会接近它：

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

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

于 2010-11-05T12:32:01.730 回答
1

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

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

PS：它比 CSS3 转换更安全。

于 2010-11-05T12:36:31.390 回答
1

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

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

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

于 2010-11-05T17:34:45.257 回答