可以通过伪类的border-color来实现。
HTML
CSS
.bg{
padding:10px;
background: #262a67
}
.paper{
background:#00b5e9;
width:500px;
height:500px;
position: relative;
}
.paper:before{
content:"";
position: absolute;
right:0;
bottom:0;
display: block;
border: 50px solid;
border-color:#0095be transparent transparent #0095be;
}
.paper:after{
content:"";
position: absolute;
right:0;
bottom:0;
display: block;
border: 50px solid;
border-color:transparent #262a67 #262a67 transparent ;
}
如果因为底下背景不是纯色的话,那就需要把折页拆成矩形条以及折页三角形。也可以通过伪类来实现。
只是提供参考,具体实施还需要自己按需要修改。
HTML
CSS
.paper{
width:500px;
height:500px;
position: relative;
background:#00b5e9;
}
.paper:after{
content:"";
position: absolute;
right:0;
bottom:-100px;
display: block;
border: 50px solid;
border-color:#0095be transparent transparent #0095be;
}
.paper:before{
content:"";
background:#00b5e9;
width:400px;
height:100px;
position: absolute;
bottom:-100px;
}