Html 45 度角 + 框阴影 - 仅使用 CSS
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4105772/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
45 Degree Angle + Box Shadow - Using nothing but CSS
提问by Sam
I need to recreate the following design using only CSS:
我只需要重新创建以下设计CSS：
What you're seeing in the picture is the top of a website container - the "links" are part of the main menu.
您在图片中看到的是网站容器的顶部——“链接”是主菜单的一部分。
As it stands, I've created the container but I'm not sure how to go about making the slant on the navigation without using an image.
就目前而言，我已经创建了容器，但我不确定如何在不使用图像的情况下使导航倾斜。
For the record: I'd rather not use an image as the chances of the box shadow on the slant matching up with box shadow rendered by the browser are slim-to-none, especially when it comes to multiple browsers.
为了记录：我宁愿不使用图像，因为倾斜上的框阴影与浏览器呈现的框阴影匹配的可能性很小，尤其是在涉及多个浏览器时。
I was thinking along the lines of a positioned and rotated div with a white background and a box shadow, but I haven't been able to build it yet.
我正在考虑带有白色背景和框阴影的定位和旋转 div 的思路，但我还没有能够构建它。
Any ideas?
有任何想法吗？
回答by Kyle
There is something called Sandpaperthat can help you to transform your elements, even in IE!
有一种叫做Sandpaper 的东西可以帮助您转换元素，即使是在 IE 中！
.myDiv {
-sand-transform: rotate(45deg);
}
You can just plug it into your site and you're set.
您只需将其插入您的网站即可。
Also you can use CSS3 transforms, which you asked about in your question: "Using nothing but CSS."
您也可以使用 CSS3 转换，您在问题中询问了这一点：“只使用 CSS。”
To do this you'd use:
为此，您可以使用：
.myDiv {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=5); /*for IE*/
}
And thanks to Josh and Robert for the Opera equivalent:
并感谢乔希和罗伯特的歌剧等价物：
-o-transform: rotate(45deg);
Internet Explorer will drop ClearType on any text that has a filter applied to it. But you can add empty extra element inside the main one and apply filter to this extra element. After this ClearType will be not ruined and the same result can be achieved.
Internet Explorer 将在应用了过滤器的任何文本上删除 ClearType。但是您可以在主要元素中添加空的额外元素并将过滤器应用于此额外元素。之后这个 ClearType 不会被破坏并且可以达到相同的结果。
回答by Robert
For rotation, you're looking for:
对于轮换，您正在寻找：
-moz-transform:rotate(45deg);
-webkit-transform:rotate(45deg);
Keep in mind, that the rotation is a CSS3 attribute, so you're not going to get the same behavior across all browsers. Rather than making just the slant with an image, it would probably be better to recreate the whole outline. I'd approach it with:
请记住，旋转是 CSS3 属性，因此您不会在所有浏览器中获得相同的行为。与其只用图像制作倾斜，不如重新创建整个轮廓。我会用以下方法处理它：
- The header section, which would have the slant, shadow, the menu background and the padding at the top of the content, pretty much like your screenshot there.
- An image that can repeat-y down the entire body of content with a shadow.
- The footer section.
- 标题部分，在内容顶部会有倾斜、阴影、菜单背景和填充，很像你在那里的屏幕截图。
- 可以用阴影在整个内容体中重复的图像。
- 页脚部分。
You can also use external libraries to attempt to recreate CSS3 attributes, but images may be the easiest way as you know how they'll render.
您还可以使用外部库来尝试重新创建 CSS3 属性，但图像可能是最简单的方法，因为您知道它们将如何呈现。
回答by Dave
I think you can use the techniques from http://nicolasgallagher.com/pure-css-speech-bubbles/demo/
我认为您可以使用http://nicolasgallagher.com/pure-css-speech-bubbles/demo/ 中的技术
This is a really nice compilation and inspiration for using CSS. Enjoy.
这是一个非常好的汇编和使用 CSS 的灵感。享受。
PS: it is safer than CSS3 transforms.
PS：它比 CSS3 转换更安全。
回答by zzzzBov
Rotation seems unnecessary. I would try using a CSS triangle effect.
旋转似乎没有必要。我会尝试使用 CSS 三角形效果。
I'm going to assume your links are in a ulso your css could select ul:beforeand make it into the correct shape.
我将假设您的链接位于 a 中，ul以便您的 css 可以选择ul:before并使其成为正确的形状。
I don't know what will happen with the box-shadowbut it might be worth a shot, and will probably be easier to align in IE without resorting to JavaScript.
我不知道会发生什么，box-shadow但它可能值得一试，并且可能更容易在 IE 中对齐而无需求助于 JavaScript。
