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

【问题标题】：45 Degree Angle + Box Shadow - Using nothing but CSS45 度角 + 盒子阴影 - 只使用 CSS
【发布时间】：2015-04-17 17:34:15
【问题描述】：

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

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

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

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

我一直在考虑一个定位和旋转的 div，它有一个白色的背景和一个盒子阴影，但我还没有能够构建它。

有什么想法吗？

【问题讨论】：

标签： html css css-shapes

【解决方案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不会被破坏，也可以达到同样的效果。

【讨论】：

-o-transform: rotate(45deg); 相当于 Opera。
要完成它，IE8需要-ms-filter: ".."，IE9需要-ms-transform: rorate(45deg);

【解决方案2】：

对于旋转，您正在寻找：

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

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

标题部分，将在内容顶部包含倾斜、阴影、菜单背景和内边距，与您的屏幕截图非常相似。
可以在整个内容主体中重复使用阴影的图像。
页脚部分。

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

【讨论】：

【解决方案3】：

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

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

PS：它比 CSS3 转换更安全。

【讨论】：

我同意被否决。当答案不合适、不能解决问题或以任何方式根本不是一个糟糕的答案时，这是公平的。但是，当我们尝试认真回答，并且在没有评论的情况下投票让我们知道出了什么问题时，这真是令人难过。这里的每个人都在努力学习一些东西，包括我自己。在这一点上，评论可能非常有价值。
我没有投反对票，但我不确定气泡与 CSS 旋转有什么关系。此外，他在演示中使用了 CSS3。
我没有责怪任何人。只是在表达任何用户如何公平地做出贡献，以及当这些事情发生时我的感受。回到我发送的 URL，是的，他使用 CSS 3 制作圆形气泡，但只使用 CSS 2.1 制作三角形气泡。我遇到的整个想法是使用三角形技术来制作你想要的绘图。恕我直言，这种技术更安全。好吧，我想你现在明白了。
@Dave 这些例子都没有使用 box-shadow。被否决的好理由。

【解决方案4】：

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

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

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

【讨论】：

阴影将围绕整个 DIV 框 - 显示某种 Predator FX。