我正在尝试在div的底部和顶部创建一个提升的角、三维框效果。我能够在div的顶部创建所需的效果,但不知道如何模仿顶部的效果。有人知道如何在div的底部和顶部实现这一点吗?
以下是一个JSFiddle:https://jsfiddle.net/rnejan81/
body {
background-color: #e2e2e2;
}
.box h3{
text-align:center;
position:relative;
top:80px;
}
.box {
width:70%;
height:200px;
background:#FFF;
margin:40px auto;
}
.effect2
{
position: relative;
}
.effect2:before, .effect2:after
{
z-index: -1;
position: absolute;
content: "";
bottom: 15px;
left: 10px;
width: 50%;
top: 80%;
max-width:300px;
background: #777;
box-shadow: 0 15px 10px #777;
transform: rotate(-3deg);
}
.effect2:after
{
transform: rotate(3deg);
right: 10px;
left: auto;
}
<div class="box effect2 effect3">
<h3>Effect 2</h3>
</div>
我刚刚用另一个div包装了你的盒子,得到了想要的输出
编辑:演示之前有一些对齐问题,感谢@zaqx指出这一点。这是最新的小提琴。
这是小提琴
body {
background-color: #e2e2e2;
}
.box h3{
text-align:center;
position:relative;
top:80px;
}
.box {
width:70%;
height:200px;
background:#FFF;
margin:40px auto;
}
/*==================================================
* Effect 2
* ===============================================*/
.effect2
{
position: relative;
}
.effect2:before, .effect2:after
{
z-index: -1;
position: absolute;
content: "";
bottom: 15px;
left: 10px;
width: 50%;
top: 80%;
max-width:300px;
background: #777;
box-shadow: 0 15px 10px #777;
transform: rotate(-3deg);
}
.effect2:after
{
transform: rotate(3deg);
right: 10px;
left: auto;
}
.effect-wrapper {
position: relative;
}
.effect-wrapper:before, .effect-wrapper:after {
z-index: -1;
position: absolute;
content: "";
bottom: 15px;
left: 16%;
width: 52%;
top: 8%;
height: 5px;
max-width: 300px;
background: #777;
box-shadow: 0 15px 10px #777;
transform: rotate(183deg);
}
.effect-wrapper:after {
transform: rotate(177deg);
right: 16%;
left: auto;
}
<div class="effect-wrapper">
<div class="box effect2 effect3">
<h3>Effect 2</h3>
</div>
</div>