Удалить тень от части (в процентах) от стороны?

Question

Представьте себе выбор списка на основе вкладок, где активный элемент (li) получает дополнительную тень от блока.Кроме того, нижняя часть (описание) имеет ту же тень блока, чтобы подделать выбранную вкладку, и div описания, имеющий тень блока и выделение.

Проблема в том, что когда я применяю тень блока к описанию div, он также отбрасывает тень наактивный элемент li, поэтому уничтожает имитацию папки.

.list ul,
.list li {
  margin: 0;
  padding: 0;
}

.list ul {
  border: 1px solid red;
}

.list li {
  display: flex;
  display: inline-block;
  padding: 20px 10px;
  border-right: 1px solid red;
}

.list li.active {
  box-shadow: 0px -5px 30px 1px rgba(62, 57, 107, .77), 0px -5px 9px 1px rgba(62, 57, 107, .76);
  border-right: 0;
}

.desc {
  border: 1px solid red;
  border-top: 0;
  box-shadow: 0px -5px 30px 1px rgba(62, 57, 107, .77), 0px -5px 9px 1px rgba(62, 57, 107, .76);
}

<div class="list">
  <ul>
    <li class="active">
      Monday
    </li>
    <li>
      Tuesday
    </li>
    <li>
      Wednesday
    </li>
</div>
<div class="desc">
  Lorem ipsum, dolor sit amet consectetur adipisicing elit. Atque, molestiae aperiam eos beatae reiciendis quisquam libero quae voluptatum possimus, est a! Totam similique facilis accusantium molestias voluptatum accusamus amet suscipit?
</div>

Codepen: https://codepen.io/anon/pen/EMjoYr

Answer 1

Вы можете скрыть тень блока под активным li, назначив ему цвет фона и более высокий z-индекс, чем у элемента с тенью блока:

Обратите внимание, я также добавил конец ul тег как ваш отсутствует в вопросе

.list ul,
.list li {
  margin: 0;
  padding: 0;
}

.list ul {
  border: 1px solid red;
}

.list li {
  display: flex;
  display: inline-block;
  padding: 20px 10px;
  border-right: 1px solid red;
}

.list li.active {
  background:white;  /* match background colour of page */
  position:relative; /* add this for z-index to work */
  z-index:1;         /* add this to go ovber top of box shadow */
  border-bottom: 1px solid white;   /* this is to cover the bottom line */
  margin-bottom:-1px;               /* move the border over the line */ 
  box-shadow: 0px -5px 30px 1px rgba(62, 57, 107, .77), 0px -5px 9px 1px rgba(62, 57, 107, .76);
 
}

.desc {
  border: 1px solid red;
  border-top: 0;
  box-shadow: 0px -5px 30px 1px rgba(62, 57, 107, .77), 0px -5px 9px 1px rgba(62, 57, 107, .76);
}

<div class="list">
  <ul>
    <li class="active">
      Monday
    </li>
    <li>
      Tuesday
    </li>
    <li>
      Wednesday
    </li>
  </ul>
</div>
<div class="desc">
  Lorem ipsum, dolor sit amet consectetur adipisicing elit. Atque, molestiae aperiam eos beatae reiciendis quisquam libero quae voluptatum possimus, est a! Totam similique facilis accusantium molestias voluptatum accusamus amet suscipit?
</div>

Если вам нужно удалить часть тени, вызванную активной вкладкой, я бы накрыл ее псевдоэлементом (и добавил отступ в текстовое поле):

.list ul,
.list li {
  margin: 0;
  padding: 0;
}

.list ul {
  border: 1px solid red;
}

.list li {
  display: flex;
  display: inline-block;
  padding: 20px 10px;
  border-right: 1px solid red;
}

.list li.active {
  /* match background colour of page */
  background: white;
  /* add this for z-index to work */
  position: relative;
  /* add this to go ovber top of box shadow */
  z-index: 1;
  box-shadow: 0px -5px 30px 1px rgba(62, 57, 107, .77), 0px -5px 9px 1px rgba(62, 57, 107, .76);
}

.list li.active:after {
  content: '';
  display: block;
  /* height of desc padding */
  height: 20px;
  position:absolute; 
  top:100%;
  left:0; right:0;
  background: white;
}

.desc {
  border: 1px solid red;
  padding: 20px;
  border-top: 0;
  box-shadow: 0px -5px 30px 1px rgba(62, 57, 107, .77), 0px -5px 9px 1px rgba(62, 57, 107, .76);
}

<div class="list">
  <ul>
    <li class="active">
      Monday
    </li>
    <li>
      Tuesday
    </li>
    <li>
      Wednesday
    </li>
  </ul>
</div>
<div class="desc">
  Lorem ipsum, dolor sit amet consectetur adipisicing elit. Atque, molestiae aperiam eos beatae reiciendis quisquam libero quae voluptatum possimus, est a! Totam similique facilis accusantium molestias voluptatum accusamus amet suscipit?
</div>

Answer 2

Попробуйте этот CSS.Конечно, вы можете изменить цвет и непрозрачность теней:)

.list ul,
.list li {
  margin: 0;
  padding: 0;   
}

.list ul {
    border: 1px solid red;
}

.list li {
  display: flex;
  display: inline-block;
  padding: 20px 10px;
  border-right: 1px solid red;
}

.list li.active {
    box-shadow: 0px -10px 30px 1px rgba(62, 57, 107, .77);
  border-right: 0;
}

.desc {
  border: 1px solid red;
  border-top: 0;
   box-shadow: 0 10px 20px 0 rgba(0, 0, 0, .5);
}