css - 用框阴影模拟分页符

Question

我正在尝试使用 CSS 创建页面分隔，但我遇到了 box-shadow 属性的问题。

我有一个看起来像黑色页面的容器，我想将它分成两个页面，它们的外观与页面的结尾和开头相同。这是我所拥有的图像(注意侧面和底部阴影之间的间隙):

_{(source: noelshack.com)}

这是所需输出的图像:

_{(source: noelshack.com)}
.

要求:

1. 我需要在分离 Angular 上得到完全相同的结果。
2. 我不能使用两个容器，因为我在这个容器中拖放元素，我只能使用一个容器。
3. 容器高度是动态的。

fiddle

HTML:

<div class="container">
    <div class="calPrin" id="barrePage1">
        <div class="calHaut"></div>
        <div class="calBas"></div></div>
    </div>
</div>

CSS:

body{
    background-color:rgb(186,186,186);
}

.container{
    border: solid 1px black;
    margin-left: auto;
    margin-right: auto;
    box-shadow: 1px 1px 1px;
    width: 782px;
    background-color: #FFFFFF;   
    height:500px;
 
}

.calHaut{
    width: 782px;
    background-color: rgb(255, 255, 255);
    border-bottom: solid 1px black;
    border-right: 1px solid black;
    border-left: 1px solid black;
    box-shadow: 0.5px 1px 1px;
    position: absolute;    
}

.calBas{
    position: relative;
    top: 4px;
    background-color: rgb(255, 255, 255);
    height: 2px;
    width: 782px;
    border-top: solid black 1px;
    border-right: solid 1px black;
    border-left: 1px solid black;
}

.calPrin{
    top:50px;
    background-color: rgb(186,186,186);
    height: 6px;
    position: absolute;
    width: 786px;
    left:8px;
}

Answer 1

如果你想在容器内使用框阴影模拟分页符，你可以这样做:

DEMO

输出:

*****编辑*****

对于您的用例，您可以删除一个 div 并对阴影进行一些调整，您可以得到这个:

DEMO

---

第一个演示代码:

HTML:

<div class="container">
    <div class="calPrin"></div>
    <div class="shdw-right"></div>
</div>

CSS:

body {
    background-color:rgb(186, 186, 186);
}
.container {
    border: solid 1px black;
    margin-left: auto;
    margin-right: auto;
    width: 782px;
    background-color: #FFFFFF;
    height:500px;
    position:relative;
    margin-bottom:100px;
    box-shadow: 10px 10px 5px #656565;
}
.calPrin {
    position:relative;
    left:-1px;
    width:784px;
    height:50px;
    border-top:1px solid #000;
    border-bottom:1px solid #000;
    background-color:rgb(186, 186, 186);
    z-index:1;
    box-shadow: inset 0px 15px 5px -5px #656565;
}
.calPrin:before, .calPrin:after {
    content:'';
    position:absolute;
    background:#BABABA;
    z-index:2;
    width:10px;
}
.calPrin:before {
    height:100%;
    right:100%;
    border-right:3px solid #BABABA;
    box-shadow: 10px 0px 5px 0px #BABABA;
}
.calPrin:after {
    left:100%;
    top:20px;
    bottom:0;
    width:15px;
    box-shadow: 0px 10px 5px 0px #BABABA;
}
.shdw-right {
    position:relative;
    left:100%;
    width:30px;
    top:-31px;
    margin-left:-15px;
    height:20px;
    background:#BABABA;
    box-shadow: 0px -10px 5px 0px #BABABA;
}