Prisoner Raju Prisoner Raju - 19 days ago 8
CSS Question

pure css folding effect with transparent background

Please see the image. How to make this kind of fold effect. I badly need the transparency.

enter image description here

I have tried this. but this has no browser support in Firefox and IE. This solution only works in Chrome.

.fold-right{
position: relative;
}
.fold-right:before{
content: "";
position: absolute;
top: -50px;
right: 0;
border: 25px solid #ccc;
-webkit-clip-path: polygon(100% 100%, 0 100%, 0 0);
clip-path: polygon(100% 100%, 0 100%, 0 0);
}
.fold-right:after{
content: "";
position: absolute;
top: -49px;
left: -49px;
background: #fff;
width: 100%;
height: 49px;
-webkit-clip-path: polygon(49px 0, 100% 0, 100% 100%, 49px 100%);
clip-path: polygon(49px 0, 100% 0, 100% 100%, 49px 100%);
}

Answer

Try this snippet. I hope, This snippet help you.

enter image description here

body{
background: #58A45E;
}
.fold-right{
position: relative;
width: 200px;
height: 200px;
background: #f9f9f9;
margin-top: 100px;
box-sizing: border-box;
padding: 10px;
display: inline-block;
}
.fold-right:before{
content: "";
position: absolute;
top: -50px;
right: 0;
border-left: 0px solid transparent;
border-right: 50px solid transparent;
border-bottom: 50px solid #ccc;
}
.fold-right:after{
content: "";
position: absolute;
top: -50px;
left: 0px;
background: #f9f9f9;
width: calc(100% - 50px);
height: 50px;
}
<div class="fold-right">Box - 1</div>
<div class="fold-right">Box - 2</div>

Comments