CSS3：带有阴影的立方体

发布于 2024-12-13 07:04:49 字数 894 浏览 2 评论 0原文

我认为在这种情况下，图像胜于雄辩。

我想得到这样的效果：

在此处输入图像描述

但我能做到的最好CSS3 的做法是这样的：

在此处输入图像描述

而这个代码绝对是糟糕的：

box-shadow: 1px 1px hsl(0, 0%, 27%),
            2px 2px hsl(0, 0%, 27%),
            3px 3px hsl(0, 0%, 27%),
            4px 4px hsl(0, 0%, 27%),
            5px 5px hsl(0, 0%, 27%),
            6px 6px hsl(0, 0%, 27%),
            7px 7px hsl(0, 0%, 27%),
            8px 8px hsl(0, 0%, 27%),
            ...

有没有这样我就可以用 pure 创建这样的效果CSS3？我不介意它是 3D 的，但等轴测的会更好。

我不需要将内容放置在盒子的侧面，只需放置在正面，因此我只使用一个

元素。

这是我到目前为止所拥有的：http://jsfiddle.net/X7xSf/3/任何

帮助将不胜感激！

原文

I think images speak louder than words in this case.

I want to get this effect:

enter image description here

But the best I can do with CSS3 is this:

enter image description here

And the code for this is absolutely terrible:

box-shadow: 1px 1px hsl(0, 0%, 27%),
            2px 2px hsl(0, 0%, 27%),
            3px 3px hsl(0, 0%, 27%),
            4px 4px hsl(0, 0%, 27%),
            5px 5px hsl(0, 0%, 27%),
            6px 6px hsl(0, 0%, 27%),
            7px 7px hsl(0, 0%, 27%),
            8px 8px hsl(0, 0%, 27%),
            ...

Is there any way that I can create an effect like this with pure CSS3? I don't mind having it be 3D, but isometric would be preferred.

I don't need to place content onto the sides of the box, just onto the front face, so I'm working with just a single <div> element.

Here's what I have so far: http://jsfiddle.net/X7xSf/3/

Any help would be appreciated!

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

旧话新听 2024-12-20 07:04:49

我会在一些 CSS 生成的元素上使用一些倾斜变换...看看这个：

http://jsfiddle .net/X7xSf/12/

如果我想在生产中使用它，我可能会确定哪些浏览器支持之前和之后，但不支持转换（仅 IE8），然后使用 Paul Irish 的方法2008 (http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/) 为 IE8 关闭此功能。

回复收藏 0 原文

冧九 2024-12-20 07:04:49

嗯...我的想法是使用边框黑客和一些屏蔽来让它在...至少 IE 8 中工作？ ~~但我不知道如何让边框向后移动~~ 修复了它。

您可以在这里看到我的想法： http://jsfiddle.net/k2AdU/1

代码概念是使用 :before 和 :after 为角创建蒙版

.cube
{
    width:100px;
    height:100px;
    background:#454545;
    position:relative;
    border-right:20px solid #333;
    border-bottom:20px solid #111;
    border-right-width:0px;
    border-bottom-width:0px;
    left:20px;
    top:20px;
}
.cube:after
{
    content:"";
    display:block;
    position:absolute;
    left:0px;
    top:100%;
    border:10px solid transparent;
    border-left:10px solid white;
    border-bottom:10px solid white;
}
.cube:before
{
    content:"";
    display:block;
    position:absolute;
    top:0px;
    left:100%;
    border:10px solid transparent;
    border-top:10px solid white;
    border-right:10px solid white;
}

Well... My idea was to use border hacks and some masking to get it to work in... IE 8 at least? ~~But I can't figure out how to get the border to animate backwards~~ Fixed it.

You can see my idea here: http://jsfiddle.net/k2AdU/1

and the code concept is to use :before and :after to create a mask for the corners

.cube
{
    width:100px;
    height:100px;
    background:#454545;
    position:relative;
    border-right:20px solid #333;
    border-bottom:20px solid #111;
    border-right-width:0px;
    border-bottom-width:0px;
    left:20px;
    top:20px;
}
.cube:after
{
    content:"";
    display:block;
    position:absolute;
    left:0px;
    top:100%;
    border:10px solid transparent;
    border-left:10px solid white;
    border-bottom:10px solid white;
}
.cube:before
{
    content:"";
    display:block;
    position:absolute;
    top:0px;
    left:100%;
    border:10px solid transparent;
    border-top:10px solid white;
    border-right:10px solid white;
}

回复收藏 0 原文

~没有更多了~