我正在尝试在偏斜的div上创建一个部分阴影,就像我可以得到这个创意一样.
现在我一直在试图用伪元素(特别是之前)这样做,但是我发现这些元素在我歪斜它们被应用的元素时表现得很奇怪.即使z-index设置为-1,伪元素也不会显示在div的顶部.无论我用z-index做什么,它都会保持在顶部.我想要它在适用于它的div后面,在下面的div前面,就像在创意中一样.
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);
}
解决方法
Skew父母然后在同样的程度上解除孩子.
* {
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.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.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>
