Создание частичной тени теней на перекошенном div

Question

Я пытаюсь создать частичную тень на перекошенном div, как только я смогу добраться до этого объявления.

Прямо сейчас я пытался сделать это с помощью псевдо элементов (до конкретно), но я обнаружил, что эти элементы ведут себя странно, когда я искажать элемент они применяются к. Псевдоэлемент продолжает отображаться поверх моего div, хотя индекс z установлен в -1. Независимо от того, что я делаю с z-index, он останется на вершине. Я хочу, чтобы он находился за div, к которому он применим, и перед div ниже, как в объявлении.

Вот мой :: до того кода и ссылку на codepen

CSS

/*! Shadows */ 
#test-title { 
    position: relative; 
} 

#test-title:before { 
    z-index: -1; 
    position: absolute; 
    content: ""; 
    bottom: 15px; 
    left: 10px; 
    width: 50%; 
    top: 80%; 
    max-width:300px; 
    box-shadow: 0 15px 10px #777; 
    -webkit-transform: rotate(-3deg); 
    -moz-transform: rotate(-3deg); 
    -o-transform: rotate(-3deg); 
    -ms-transform: rotate(-3deg); 
    transform: rotate(-3deg); 
} 

http://codepen.io/kathryncrawford/pen/WwWEma

Answer 1

Skew родитель затем unskew ребенок в той же степени.

* { 
 
    box-sizing: border-box 
 
} 
 
body { 
 
    padding: 40px 0 
 
} 
 
section { 
 
    width: 60vw; 
 
    clear: both; 
 
    overflow: hidden; 
 
    min-height: 100px; 
 
    margin: 0 auto; 
 
    position: relative; 
 
    background: #035076 
 
} 
 
section article { 
 
    width: 60%; 
 
    padding: 20px; 
 
    color: white; 
 
    margin: 0 auto 
 
} 
 
section:nth-child(even) { 
 
    transform: skew(-45deg) translate(5vw); 
 
    box-shadow: inset 0 0 2px 0 black; 
 
} 
 
section:nth-child(odd) { 
 
    transform: skew(45deg); 
 
} 
 
section:nth-child(even) article { 
 
    transform: skew(45deg) translate(5vw); 
 
} 
 
section:nth-child(odd) article { 
 
    transform: skew(-45deg); 
 
} 
 
section:before, 
 
section:after { 
 
    content: ''; 
 
    position: absolute; 
 
} 
 
section:nth-child(even):before { 
 
    width: 100%; 
 
    height: 0; 
 
    bottom: 100%; 
 
    left: 0; 
 
    z-index: 6; 
 
    opacity: 1; 
 
    transform: rotate(-10deg) translateY(-30px); 
 
    box-shadow: 0px 0px 64px 30px rgba(0, 0, 0, 0.8); 
 
} 
 

 
section:nth-child(odd):not(:first-child):before { 
 
    width: 100%; 
 
    height: 0; 
 
    bottom: 100%; 
 
    right: 0; 
 
    z-index: 6; 
 
    opacity: 1; 
 
    transform: rotate(10deg) translateY(-30px); 
 
    box-shadow: 0px 0px 64px 30px rgba(0, 0, 0, 0.8); 
 
}

<section> 
 
    <article>What our clients say About Us</article> 
 
</section> 
 
<section> 
 
    <article>Read More!</article> 
 
</section> 
 
<section> 
 
    <article>Read More!</article> 
 
</section> 
 
<section> 
 
    <article>Read More!</article> 
 
</section>

Answer 2

Я пытался, он не идеален, но это ближе к желаемому виду, imho:

<div id="test-title"> 
      <h3>What our clients say about us</h3> 
     </div> 
     <div id="shadow1"></div> 

Итак, я добавил новый элемент html (shadow) вместо использования псевдоэлементов ... Теперь я правильно установил z-индексы и позиции, чтобы скрыть поворотный теневой div за первым div и добавил это CSS:

#shadow1 { 
    position:absolute; 
    width:50%; 
    height:150px; 
    background:black; 
    top:50px; 
    left:11%; 
    z-index:6; 
    opacity:1; 
transform: rotate(-5deg); 
box-shadow: 15px 56px 50px -12px rgba(0,0,0,0.80); 

} 

Демо: http://codepen.io/anon/pen/vGwNqY

Вы можете играть с вращением, коробчатой ​​тенью, положением, высотой ... но, это может быть хорошее начало (может быть). Постскриптум Аналогичная логика может быть применена ко второму div.

Answer 3

Более легкий подход заключается в том, чтобы поместить тень в верхнюю часть каждого окна после первого. Это решит всевозможные проблемы с z-index, поскольку каждый ящик находится на 1 уровне выше, чем поле над ним .. и позволяет тени сидеть внутри контейнера, а не за его пределами.

Я также сменил теневое моделирование, чтобы использовать радиальный градиент * вместо тени окна, поскольку в этой ситуации он немного легче контролировать, а также ближе к вашему дизайну. Я также сделал немного позиционирования, чтобы она выглядела немного лучше тоже, и получить отдельную стороны для skew1 и skew2

Я изменил свои последний набор правил это:

.test-info:before { 
    position: absolute; 
    content: ""; 
    width: 100%; 
    left: 0; 
    top: 0; 
    height: 30px; 
} 

.test-info.skew1:before { 
    background: radial-gradient(ellipse farthest-side at 30% top, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0) 100%); 
} 
.test-info.skew2:before { 
    background: radial-gradient(ellipse farthest-side at 70% top, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0) 100%); 
} 

See Demo

* Примечание. Возможно, вы захотите проверить/добавить дополнительную поддержку браузера на градиент, который я вложил, прежде чем использовать его.

Answer 4

попытаться сделать коробку тени для второго элемента, используя :before псевдо https://jsfiddle.net/0andpzsp/

.cont { 
 
    width: 1000px; 
 
    height: 500px; 
 
} 
 

 
div[class^="d"] { 
 
    width: 70%; 
 
    height: 50%; 
 
    position: relative; 
 
    margin-left: 40px; 
 
    margin-top: 50px; 
 
} 
 

 
.d0 { 
 
    background: linear-gradient(to right, #005f8a 0%,#00486c 50%,#003a59 100%);; 
 
    transform: skew(20deg) 
 
} 
 

 
.d1 { 
 
    background: linear-gradient(to right, #005f8a 0%,#00486c 50%,#003a59 100%);; 
 
    overflow: hidden; 
 
    top: -50px; 
 
    left: 20%; 
 
    transform: skewX(-20deg); 
 
    z-index: -1 
 
} 
 

 
.d1:before { 
 
    content: ''; 
 
    border-radius: 30%; 
 
    position: absolute; 
 
    display: block; 
 
    width: 600px; 
 
    height: 70px; 
 
    z-index: 9999; 
 
    top: -100px; 
 
    left: -70px; 
 
    box-shadow: -50px 60px 90px 0px #000; 
 
    transform: rotate(-5deg) 
 
}

<div class="cont"> 
 
    <div class="d0"></div> 
 
    <div class="d1"> 
 
    </div> 
 
</div>