3

CSS repsonsive cube window

I found this image online and tryed to create these boxes with css. I failed. Has anyone an idea how to solve this problem?

This is my code. The problem is the left bar:

.box {
  position: relative;
  margin: 10px;
  display: inline-block;
}

.content {
  border-top: 2px solid red;
  border-right: 2px solid red;
  padding: 5px;
}

.box:before {
  content: '';
  position: absolute;
  top: 0;
  left: -10px;
  height: 100%;
  width: 10px;
  background-color: red;
  transform: skew(-45deg) rotate(-45deg);
}

.box:after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: -5px;
  height: 10px;
  width: 100%;
  background-color: red;
  transform: skew(-45deg);
}
<div class="box">
  <div class="content">
  CONTENT<br />
  Some more content
  </div>
</div>

2 Answers 2

4

border-image with linear-gradient can do it:

.box {
  margin: 10px;
  display: inline-block;
  border-style:solid;
  border-width:2px 2px 15px 15px;
  border-image-slice:2 2 15 15; /* same as border-width*/
  border-image-source:linear-gradient(-45deg,transparent 9px,red 0 calc(100% - 9px),transparent 0);
}

.content {
  padding: 5px;
}
<div class="box">
  <div class="content">
    CONTENT<br> Some more Content
  </div>
</div>

<div class="box">
  <div class="content">
    CONTENT<br> more Content
  </div>
</div>

<div class="box">
  <div class="content">
    AA BB
  </div>
</div>

With CSS variables to have better control:

.box {
  --b:2;   /* border length (without unit!!)*/
  --c:15;  /* the cube perspective (without unit!!)*/
  
  --g:calc((var(--c) - var(--b))*0.707px); /* 0.707 = cos(45deg) = sin(45deg) */
  margin: 10px;
  display: inline-block;
  border-style:solid;
  border-width:calc(var(--b)*1px) calc(var(--b)*1px) calc(var(--c)*1px) calc(var(--c)*1px);
  border-image-slice:var(--b) var(--b) var(--c) var(--c);
  border-image-source:linear-gradient(-45deg,transparent var(--g),red 0 calc(100% - var(--g)),transparent 0);
}

.content {
  padding: 5px;
}
<div class="box">
  <div class="content">
    CONTENT<br> Some more Content
  </div>
</div>

<div class="box" style="--b:3;--c:10">
  <div class="content">
    CONTENT<br> more Content
  </div>
</div>

<div class="box" style="--b:1;--c:20">
  <div class="content">
    AA BB
  </div>
</div>
<div class="box" style="--b:1;--c:5">
  <div class="content">
    AA BB
  </div>
</div>

CSS cube perspective

You can also have it in any direction you want:

.box {
  --b:2;   /* border length (without unit!!)*/
  --c:15;  /* the cube perspective (without unit!!)*/
  
  --g:calc((var(--c) - var(--b))*0.707px); /* 0.707 = cos(45deg) = sin(45deg) */
  margin: 10px;
  display: inline-block;
  border-style:solid;
}

.bottom-left {
  border-width:calc(var(--b)*1px) calc(var(--b)*1px) calc(var(--c)*1px) calc(var(--c)*1px);
  border-image-slice:var(--b) var(--b) var(--c) var(--c);
  border-image-source:linear-gradient(-45deg,transparent var(--g),red 0 calc(100% - var(--g)),transparent 0);
}
.top-right {
  border-width:calc(var(--c)*1px) calc(var(--c)*1px) calc(var(--b)*1px) calc(var(--b)*1px) ;
  border-image-slice: var(--c) var(--c) var(--b) var(--b);
  border-image-source:linear-gradient(-45deg,transparent var(--g),red 0 calc(100% - var(--g)),transparent 0);
}
.top-left {
  border-width:calc(var(--c)*1px) calc(var(--b)*1px) calc(var(--b)*1px) calc(var(--c)*1px) ;
  border-image-slice:var(--c) var(--b) var(--b) var(--c);
  border-image-source:linear-gradient(45deg,transparent var(--g),red 0 calc(100% - var(--g)),transparent 0);
}
.bottom-right {
  border-width:calc(var(--b)*1px) calc(var(--c)*1px) calc(var(--c)*1px) calc(var(--b)*1px) ;
  border-image-slice:var(--b) var(--c) var(--c) var(--b);
  border-image-source:linear-gradient(45deg,transparent var(--g),red 0 calc(100% - var(--g)),transparent 0);
}

.content {
  padding: 5px;
}
<div class="box bottom-left">
  <div class="content">
    CONTENT<br> Some more Content
  </div>
</div>

<div class="box top-right" style="--b:3;--c:10">
  <div class="content">
    CONTENT<br> more Content
  </div>
</div>

<div class="box bottom-right" style="--b:1;--c:20">
  <div class="content">
    AA BB
  </div>
</div>
<div class="box top-left" style="--b:1;--c:5">
  <div class="content">
    AA BB
  </div>
</div>

CSS responsive cube frame

We can also add more 3D effect by adjusting the coloration and using a different technique with clip-path

.box {
  --b:2px;   /* border length*/
  --c:15px;  /* the cube perspective */
  
  --g:calc(var(--c)*0.707); /* 0.707 = cos(45deg) = sin(45deg) */
  margin: 10px;
  display: inline-block;
  padding:var(--b) var(--b) var(--c) var(--c);
  background:
    linear-gradient(-45deg,transparent var(--g),#cc0404 0) left   /var(--c) 100%,
    linear-gradient(135deg,transparent var(--g),red 0)     bottom /100% var(--c),
    linear-gradient(red,red)                               top    /100% var(--b),
    linear-gradient(red,red)                               right  /var(--b) 100%;
  background-repeat:no-repeat;
  clip-path: 
    polygon(0% calc(var(--c) - var(--b)), calc(var(--c) - var(--b)) 0%, 
    100% 0%, 
    100% calc(100% - var(--c) + var(--b)), calc(100% - var(--c) + var(--b)) 100%, 
    0% 100%);
    
}

.content {
  padding: 5px;
}
<div class="box">
  <div class="content">
    CONTENT<br> Some more Content
  </div>
</div>

<div class="box" style="--b:3px;--c:10px">
  <div class="content">
    CONTENT<br> more Content
  </div>
</div>

<div class="box" style="--b:1px;--c:20px">
  <div class="content">
    AA BB
  </div>
</div>
<div class="box" style="--b:1px;--c:5px">
  <div class="content">
    AA BB
  </div>
</div>

3D CSS cube responsive

A Codepen demo to play with the code

2
  • Why are here 9 px in border-image-source:linear-gradient(-45deg,transparent 9px,red 0 calc(100% - 9px),transparent 0);
    – Svenwas3f
    Commented Feb 15, 2020 at 22:17
  • @Svenwas3f added an update where I will use CSS variable and calculation Commented Feb 15, 2020 at 22:33
3

One way to achieve this effect is to use a ::before pseudo-element with a clip-path applied to it.

In the example below, I have repeatedly used the values 10px and 2px though these could straightforwardly be replaced with CSS Custom Properties such as:

:root {
  --cube-depth: 10px;
  --cube-border: 2px;
}

and then used throughout the stylesheet as var(--cube-depth) and var(--cube-border).


Working Example:

.cube {
  position: relative;
  float: left;
  margin: 0 4px 8px 4px;
  padding: 2px 2px calc(2px + 10px) calc(2px + 10px);
  color: rgb(237, 62, 68);
  box-sizing: border-box;
}

.cube::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgb(237, 62, 68);
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px, 10px 0, 10px calc(100% - 10px), calc(100% - 2px) calc(100% - 10px), calc(100% - 2px) 2px, 10px 2px);
}

.size-80x100 {
  width: calc(100px + 10px);
  height: calc(80px + 10px);
}

.size-80x200 {
  width: calc(200px + 10px);
  height: calc(80px + 10px);
}

.size-80x360 {
  width: calc(360px + 10px);
  height: calc(80px + 10px);
}

.size-80x440 {
  width: calc(440px + 10px);
  height: calc(80px + 10px);
}
<div class="cube size-80x100">80 x 100</div>
<div class="cube size-80x440">80 x 440</div>
<div class="cube size-80x360">80 x 360</div>
<div class="cube size-80x200">80 x 200</div>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.