Как создать границу у тени за блоком

Question

Как создать границу у тени за блоком

Рейтинг: 0Ответов: 1Опубликовано: 09.08.2023

Подскажите, как сделать вот такой блок как на изображении. Сам блок с border, у него соответственно тень, в примере она розовая, и у тени граница(border).

<div class="flex_items_block_rgb_1"></div>

.flex_items_block_rgb_1{
max-width: 100%;
border: 3px solid #000;
background: #FFF;
border-radius: 10px;
box-shadow: -10px -10px #AE56CF;
}

css html border box-shadow

Источник: Stack Overflow на русском

Answer 1

▲ 0Принят

body {
  padding: 2rem;
  background: linear-gradient(90deg, #76aaf0 0%, #c738c0 100%);
}

.test {
  margin-inline: auto;
  width: 80%;
  aspect-ratio: 4/1;
  border: 2px solid black;
  border-radius: 1rem;
  background-color: #ffffff;
  box-shadow: 
    -10px -10px 0 0 #ad55ce,
    -11px -11px 0 2px #000000;
}

<div class="test"></div>

Как создать границу у тени за блоком

Ответы