БЛОГ НА HUSL


Как создать панель куба с объемной тенью с помощью CSS?

Автор вопроса: Alexandr_TT

введите сюда описание изображения

Я нашел это изображение в Интернете и попытался создать эти объемные коробки с помощью 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>


Источник

Ответы (2 шт):

Автор решения: Alexandr_TT

border-image с inear-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;   /* длина границы (без единицы измерения !!)*/
  --c:15;  /* перспектива куба (без единицы измерения !!)*/
  
  --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>

введите сюда описание изображения

Источник: @TemaniAfif

→ Ссылка
Автор решения: CbIPoK2513

На CSS с использованием Grid Layout, тень на box-shadow.

/* #ed3e44 */

.shadow {
  display: grid;
  grid-auto-columns: 50px;
  grid-template-areas:
    '. . . . l1 l1'
    'l2 l2 l3 l3 . .'
    '. . l4 l4 l5 l5';
  grid-gap: 10px;
}

.shadow > div {
  display: block;
  min-width: 50px;
  height: 50px;
  box-shadow: 
     0    0   0 2px #ed3e44 inset,
    -1px  1px 0 0   #ed3e44,
    -2px  2px 0 0   #ed3e44,
    -3px  3px 0 0   #ed3e44,
    -4px  4px 0 0   #ed3e44,
    -5px  5px 0 0   #ed3e44;
  padding: 2px;
  box-sizing: border-box;
}

.shadow > div:nth-child(5) {grid-area: l1;}
.shadow > div:nth-child(6) {grid-area: l2;}
.shadow > div:nth-child(7) {grid-area: l3;}
.shadow > div:nth-child(12) {grid-area: l4;}
.shadow > div:nth-child(13) {grid-area: l5;}
<div class="shadow">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <!----->
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <!----->
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

→ Ссылка

licensed under cc by-sa 3.0 with attribution.