3

Есть два элемента

<div class="first">
  <div class="second">
  </div>
</div>

CSS

.first {
  width: 400px;
  height: 200px;
  border: solid 1px #0b1531;
  background: #eef6fe;
}

.second {
  width: 140px;
  height: 60px;
  margin: auto;
  margin-top: 70px;
  background: #fff;
  border: solid 1px #0b1531;
  position: relative;
}

У внутреннего элемента с помощью :before добавляется тень
CSS

.second:before {
  content: "";
  width: 50%;
  height: 1px;
  top: 56px;
  left: -2px;
  box-shadow: 0 3px 3px 0px rgba(0, 0, 0, 0.65);
  -webkit-transform: rotate(-2deg);
  -moz-transform: rotate(-5deg);
  -o-transform: rotate(-5deg);
  -ms-transform: rotate(-5deg);
  transform: rotate(-5deg);
  position: absolute;
  z-index: -1;
}

Если у :before стоит z-index -1, то тень пропадает, если 0 и выше - накладывается на элемент. Нужно, чтобы тень была видна, но чтобы она была под элементом.
Ссылка на jsfiddle - https://jsfiddle.net/taelshaany/am0wrdgx/

2 ответа 2

7

Кому-то может пригодиться решение с 3D:

el {
    transform-style: preserve-3d;
}

el:after {
    transform: translateZ(-1px);
}
3

На самом деле тень у вас располагается как раз под вторым блоком. Но также она располагается и под первым, из-за чего ее не видно.

Решить просто - добавьте стили для первого блока:

.first {
  position: relative;
  z-index: 0;
}

Этим вы заставите браузер при отрисовке страницы учитывать первый блок и корректно наложить тень над первым блоком, но под вторым.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.