CSS 2D куб эффект

Question

Я пытаюсь построить это:

Я хочу сделать это с помощью только CSS, и он должен быть отзывчивым. Я готов использовать шаблон изображения.

Тени (левая и полосатая) могут быть разных цветов. Этот подход должен иметь это в виду.

Это то, что я до сих пор: JSFiddle

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; 
 
}

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

Я не могу найти способ, чтобы получить правильную высоту для левой тени.

Ссылки: CSS-Tricks, CSS Shapes

Answer 1

Для левой тени, используйте только 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>

Answer 2

Как насчет этого?

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/