Как создать окно куба с css?

Question

Я нашел это изображение в Интернете и попытался создать эти поля с css. Я провалил. Кто-нибудь знает, как решить эту проблему?

Это мой код. Проблема в левой панели:

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

Answer 1

border-image с linear-gradient может сделать это:

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

С CSS переменными для лучшего контроля:

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

Вы также можете иметь его в любом направлении:

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

Мы также можем добавить больше 3D-эффекта, регулируя окраску и используя другую технику с 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>

Answer 2

Одним из способов достижения этого эффекта является использование псевдоэлемента ::before с примененным к нему clip-path.

В примере ниже я неоднократно использовал значения 10px и 2px хотя их можно было бы просто заменить на CSS Пользовательские свойства , такие как:

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

, а затем использовать по всей таблице стилей как var(--cube-depth) и var(--cube-border).

---

Рабочий пример:

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