45DegreeAngle+BoxShadow-UsingnothingbutCSS

28  

There is something called Sandpaper that can help you to transform your elements, even in IE!

即使在IE中，有一种叫做Sandpaper的东西可以帮助你改变你的元素！

.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:

感谢Josh和Robert对Opera的等价：

-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将不会被破坏，并且可以实现相同的结果。

1  

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属性，因此您不会在所有浏览器中获得相同的行为。而不是仅仅使用图像倾斜，重建整个轮廓可能会更好。我接近它：

1. 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.
2. 标题部分，内容顶部有倾斜，阴影，菜单背景和填充，非常类似于你的屏幕截图。
3. An image that can repeat-y down the entire body of content with a shadow.
4. 可以使用阴影在整个内容中重复y的图像。
5. The footer section.
6. 页脚部分。

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属性，但是当您知道它们将如何呈现时，图像可能是最简单的方式。

1  

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转换更安全。

1  

Rotation seems unnecessary. I would try using a CSS triangle effect.

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

I'm going to assume your links are in a ul so your css could select ul:before and make it into the correct shape.

我将假设您的链接处于ul状态，因此您的css可以选择ul：之前并将其设置为正确的形状。

I don't know what will happen with the box-shadow but it might be worth a shot, and will probably be easier to align in IE without resorting to Javascript.

我不知道盒子阴影会发生什么，但它可能值得一试，并且可能更容易在IE中对齐而不需要求助于Javascript。