html – 45度角盒子阴影 – 只使用CSS

前端之家收集整理的这篇文章主要介绍了html – 45度角盒子阴影 – 只使用CSS前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我需要使用CSS重新创建以下设计:

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

就这样,我创建了容器,但是我不知道如何在不使用图像的情况下使导航器倾斜。

为了记录:我宁愿不使用图像,因为浏览器渲染的盒子阴影与盒子阴影的匹配机会很小,特别是当涉及到多个浏览器时。

我正在沿着一个具有白色背景和盒子阴影的定位和旋转的div的线条思考,但是我还没有能够构建它。

有任何想法吗?

解决方法

有一个叫做 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*/
}

并且感谢乔希和罗伯特为歌剧等同的:

-o-transform: rotate(45deg);

Internet Explorer将在应用了过滤器的任何文本上放置ClearType。但是,您可以在主要内容添加空的额外元素,并将过滤器应用于此额外的元素。此ClearType将不会被破坏,并且可以实现相同的结果。

原文链接:https://www.f2er.com/html/232933.html

猜你在找的HTML相关文章