CSS 2D立方体效果

Question

我试图建立这个：

我想用CSS做它，它需要响应。我愿意使用图像模式。

阴影（左边的和条纹的）可以是不同的颜色。这种方法必须考虑到这一点。

这是我到目前为止所做的：JSFiddle

＆＃13;

＆＃13;

body {
    padding: 50px;
    background-color: #000 !important;
}
.cube {
    position: relative;
    padding: 20px;
    color: #fff;
    border: 2px solid #fff;
    background-color: #000;
}
.cube::before {
    content:'';
    position: absolute;
    bottom: 25%;
    left: -28px;
    width: 40px;
    height: 35%;
    background-color: #fff;
    transform: rotate(-70deg) skew(-70deg);
    z-index: 0;
}
.cube::after {
    content:'';
    position: absolute;
    right: 0;
    bottom: -18px;
    left: -15px;
    height: 40px;
    background: repeating-linear-gradient(-70deg, #000, #000 5px, #fff 4px, #fff 8px);
    z-index: -1;
}
#cube1 {
    float: left;
    width: 30%;
}
#cube2 {
    width: 25%;
    float: right;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="cube" id="cube1">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="cube" id="cube2">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc quis nunc ut justo vehicula iaculis. Duis nec sapien eu nulla congue rhoncus non at mi. Fusce tincidunt accumsan enim quis pharetra. Nunc lorem magna, eleifend sed risus at, molestie auctor nulla..</p>
</div>

＆＃13;

＆＃13;

＆＃13;

我无法找到一种方法来获得左影的正确高度。

参考文献：CSS-Tricks，CSS Shapes

Answer 1

那怎么样？

body {
    padding: 50px;
    background-color: #000 !important;
}
.cube {
    position: relative;
    padding: 20px;
    color: #fff;
    border: 2px solid #fff;
    background-color: #000;
    word-wrap: break-word;
}
.cube::before {
    content:'';
    position: absolute;    
    left: -11px;
    width: 10px;
    top: 12px;
    height: calc(100% + 4px);
    background-color: #fff;
    transform:  skewY(-70deg);
    z-index: 0;
}
.cube::after {
    content:'';
    position: absolute;
    right: -2px;
    bottom: -30px;
    left: -6px;
    height: 28px;
    background: repeating-linear-gradient(-90deg, #000, #000 5px, #fff 4px, #fff 8px);
    transform:  skewX(-20deg);
    z-index: -1;
}
#cube1 {
    float: left;
    width: 30%;
}
#cube2 {
    width: 25%;
    float: right;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="cube" id="cube1">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="cube" id="cube2">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc quis nunc ut justo vehicula iaculis. Duis nec sapien eu nulla congue rhoncus non at mi. Fusce tincidunt accumsan enim quis pharetra. Nunc lorem magna, eleifend sed risus at, molestie auctor nulla..</p>
</div>

https://jsfiddle.net/n9qpus7e/

Answer 2

对于左侧阴影，仅使用skewY而不是skew和rotate。然后，您可以使用height:100%更精确地定位它。

现在底部阴影的条纹延伸到左侧阴影的左侧......我不知道你是否想要一个更宽的左阴影或一个更高的底部阴影，所以我会留下它作为练习阅读器。

body {
    padding: 50px;
    background-color: #000 !important;
}
.cube {
    position: relative;
    padding: 20px;
    color: #fff;
    border: 2px solid #fff;
    background-color: #000;
}
.cube::before {
    content:'';
    position: absolute;
    top:8px;
    left:-10px;
    width: 9px;
    height: 100%;
    background-color: #FFF;
    transform: skewY(-70deg);
    z-index: 0;
}
.cube::after {
    content:'';
    position: absolute;
    right: 0;
    bottom: -18px;
    left: -15px;
    height: 40px;
    background: repeating-linear-gradient(-70deg, #000, #000 5px, #fff 4px, #fff 8px);
    z-index: -1;
}
#cube1 {
    float: left;
    width: 30%;
}
#cube2 {
    width: 25%;
    float: right;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="cube" id="cube1">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="cube" id="cube2">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc quis nunc ut justo vehicula iaculis. Duis nec sapien eu nulla congue rhoncus non at mi. Fusce tincidunt accumsan enim quis pharetra. Nunc lorem magna, eleifend sed risus at, molestie auctor nulla..</p>
</div>