45度角+框阴影 - 只使用CSS [英] 45 Degree Angle + Box Shadow - Using nothing but CSS

问题描述

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

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

因为它是，我已经创建了容器，但我不知道如何做的倾斜在导航上而不使用图像。

对于记录：我宁愿不使用图像，因为阴影阴影与浏览器呈现的框阴影匹配的机会很小 - 无，尤其是涉及到多个浏览器。

我一直在想着一个定位和旋转的div的白色背景和一个盒子的影子，但我还没有能够建立它的线。

任何想法？

解决方案

=http://www.useragentman.com/blog/2010/03/09/cross-browser-css-transforms-even-in-ie/ =noreferrer>砂纸，可以帮助你以转换你的元素，即使在IE！

  .myDiv {
 -sand-transform：rotate（45deg）; 
} 
  

您可以将其插入您的网站， p>

此外，你可以使用CSS3变换，你在你的问题中问：什么也不用CSS。

为此，您可以使用：

  .myDiv { 
 -webkit-transform：rotate（45deg）; 
 -moz-transform：rotate（45deg）; 
 filter：progid：DXImageTransform.Microsoft.BasicImage（rotation = 5）; / * for IE * / 
} 
  

感谢Josh和Robert ：

  -o-transform：rotate（45deg）; 
  

Internet Explorer会将ClearType放置在应用了过滤器的任何文本上。但是你可以在main中添加空的额外元素，并对这个额外的元素应用过滤器。之后ClearType将不会被破坏，可以实现相同的结果。

I need to recreate the following design using only 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.

Any ideas?

解决方案

There is something called Sandpaper that can help you to transform your elements, even in 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."

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.

这篇关于45度角+框阴影 - 只使用CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！