1

.wrapper {
  width: 100%;
  height: 100vh;
  background-color: silver;
}

.first {
  width: 100%;
  height: 50%;
  background-color: #282b3a;
}

.second {
  width: 100%;
  height: 100%;
  background-color: #eeeeee;
}

.block {
  top: -40px;
  position: relative;
  width: 200px;
  height: 200px;
  background-color: #fff;
  margin: 0 auto;
  box-shadow: 3px 8px 15px #b3afaf, -3px 8px 15px #b3afaf;
}
<div class="wrapper">
  <div class="first">
  </div>
  <div class="second">
    <div class="block">
    </div>
  </div>
</div>

Нужно убрать тень в верхней части боковых линий, где блок заходит на другой. Что бы на месте перекрытия верхнего блока тени не было, а ниже неё была. Для наглядности скрин, выше красных линий тень убрать надо, оставив все, что ниже.

пример как надо

1 ответ 1

4

Можно использовать цвет тёмного блока в качестве цвета тени(с добавлением прозрачности), а можно поизголяться с псевдоэлементами и position:absolute.

.wrapper {
  width: 100%;
  height: 100vh;
  background-color: silver;
}

.first {
  width: 100%;
  height: 50%;
  background-color: #282b3a;
}

.second {
  width: 100%;
  height: 100%;
  background-color: #eeeeee;
  text-align:center;
  word-spacing:30px;
}

.block {
  display:inline-block;
  top: -40px;
  position: relative;
  width: 200px;
  height: 200px;
  background-color: #fff;
  margin: 0 auto;  
}
.way1{
  box-shadow: 3px 8px 15px rgba(40,43,58,.2), -3px 8px 15px rgba(40,43,58,.2);
}
.way2__content{
  height:100%;
  position:relative;
  background:inherit;
}
.way2:before{
  content:'';
  display:block;
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  box-shadow:3px 8px 15px green;
  clip:rect(40px,100vw,100vw,-10px);
  /*обрезка по низу и бокам для отображения тени сделана заведомо больше размера элемента*/
}
<div class="wrapper">
  <div class="first">
  </div>
  <div class="second">
    <div class="block way1"></div>
    
    <div class="block way2">
    </div>
  </div>
</div>

2
  • Гениально!) И главное просто. Это решило задачу, но вот заинтересовал такой момент - можно ли как то это реализовать путем применения дополнительных стилей, форматирования, может каких-то псевдоэлементов типа before и after или функции transition?
    – Артем
    10 июл 2018 в 10:24
  • Добавил вариант с псевдоэлементом
    – zhurof
    10 июл 2018 в 10:53

Ваш ответ

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

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