Как сдвинуть 3 блока относительно друг друга в CSS?

Question

[deserteer]

Добрый день. Как не равномерно сдвинуть один фон относительно другого? Как на картинке? И возможно ли использовать для этого after и before?

Answer 1

[Alex Karo]

1) Можно сделать один блок (зеленый) и множественную тень
2) Можно after и before с position: relative
3) Можно просто несколькими блоками

Comments

[deserteer]

Можно ссылки на вариант 1 и 2, 3й не удобен. Я не совсем понимаю в какую сторону копать.

[Alex Karo]

https://developer.mozilla.org/ru/docs/Web/CSS/box-...
Смотри последний пример Demo с двумя тенями. Убираем размытие, добавляем еще одну - получаем то, что надо

[deserteer]

Alex Karo, круто, получилось. А что если нужно что-то такого рода. Один или все вместе не являются одной формы. И возможно, есть желание добавить какой-то декоративный элемент (там линии в виде квадрата). Какой из вариантов 1-3 мне нужен?

[Alex Karo]

Тогда 2 или 3
Ниже скинули пример по 2-му способу

[Alex Karo]

Или можно один задний блок тенью, а второй псевдоэлементом

[deserteer]

Alex Karo, спасибо большое за помощь

Answer 2

[xversus]

Можно, но необязательно, вполне достаточно абсолютного позиционирования с вложенностью. У него и браузерная поддержка пошире будет.
https://codepen.io/redstone-m/pen/RwwoPPW

Comments

[deserteer]

В данном случае, мне нежелательно трогать html иначе не заваривался бы над более не очевидным решением.

[xversus]

Для псевдоэлементов принцип ровно тот же, что в примере, только для ::after и ::before дополнительно прописываешь высоту, ширину и z-index.

[deserteer]

xversus, есть div с классом bg-1, но почему-то не работает, подскажите если информация достаточна.

.bg-1 {
	position: relative;
	
}
.bg-1:after {
	position: absolute;
	width: 500px;
	height: 500px;
	background-color: white;
	top: 20px;
	z-index: 100;
}

[deserteer]

xversus, простите, ответ найден ниже, спасибо вам большое!

Answer 3

[origami1024]

Вота на псевдоэлементах если что

.theDude{
  position: relative;
}
.theDude:before{
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: -1;
  transform: translate(20px, 20px);
  background-color: gray;
}
.theDude:after{
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: -2;
  transform: translate(40px, 40px);
  background-color: lightgray;
}

Comments

[deserteer]

Неудивительная формальность.
Три отдельных блока мне не подходит. Условие такое что html изменить мне не удобно.

Да.

Как?

[deserteer]

Не работало из-за отсутствия.
content: '';

[origami1024]

deserteer, что не работало?

[deserteer]

origami1024, в ветке выше, я написал, что пытался решить эту проблему псевдоэлементами, и привёл код. Он не работал из-за отсутствия в псевдоэлементах "пустого" контента.