How to make a pure CSS full height and truly transparent folding effect over an image? - html

Question

Inspired by this link and this link, I am trying to make pure CSS folding effect with two requirements:
fully transparent background to show an <IMAGE> behind it (!)
being able to use the FULL height of the <DIV> element inside it (!)
I've tried making mine work but the topright corner doesnt become transparent. If I replace...
border-top: 60px solid red;
with
border-top: 60px solid transparent;
then the background of the rectangle box appears through it. Is there a way to solve this with pure CSS solution? If yes how? If not, then what alternatives are they that come close to CSS? The code/coordinations should be readable, interpretable and easily changeable by humans without the need of a vector based program such as inkscape.
The DEMO where I'm stuck:
https://jsfiddle.net/cg7hoyt3/

Answer 1

Perhaps use a linear-gradient instead of an solid color as a background to your primary div.
The border-width and the gradient stop have a ratio of 1 / sqrt(2) = .7071.
If you're using CSS Custom Properties or a CSS preprocessor this becomes much simpler.
Codepen Demo of variable use
body {
background-image: url("http://hdbackgroundspic.com/wp-content/uploads/2017/09/drop-of-water-background.jpg");
}
div {
width: 230px;
height: 230px;
margin: 50px auto;
background: linear-gradient(-135deg, transparent, transparent 45px, gold 45px, gold);
position: relative;
}
div::after {
content: " ";
position: absolute;
top: 0;
right: 0;
height: 0px;
width: 0px;
z-index: 2;
border-width: 30px; /* note .7071 of gradient-stop */
border-style: solid;
border-color: transparent transparent yellow yellow;
filter: drop-shadow(-2px 6px 6px rgba(0, 0, 0, .5));
}
<div></div>

Answer 2

As suggested in the comments, this can be done with a clipping mask:
clip-path: polygon(0 0, 210px 0, 100% 60px, 100% 100%, 0 100%);
While this can look rather daunting, it is actually really easy to read: just read the points one-by-one, starting from the top left. The points draw a polygon around what will be visible.
Note that clip-mask will only work with modern browsers (IE + Edge not included). See Can I use for up-to-date browser support and Mozilla Plotform Status for up-to-date development status.
Here is the code:
body {background-image: url("http://hdbackgroundspic.com/wp-content/uploads/2017/09/drop-of-water-background.jpg")}
.page {
width: 230px;
height: 230px;
margin: 50px auto;
background: gold;
padding: 20px;
}
.fold {
position: relative;
-webkit-box-shadow: -5px 7px 5px rgba(0,0,0,0.8);
-moz-box-shadow: -5px 7px 5px rgba(0,0,0,0.8);
box-shadow: -5px 7px 5px rgba(0,0,0,0.8);
-webkit-clip-path: polygon(0 0, 210px 0, 100% 60px, 100% 100%, 0 100%);
clip-path: polygon(0 0, 210px 0, 100% 60px, 100% 100%, 0 100%);
}
.fold:before, .fold:after {
content: "";
position: absolute;
top: 0%;
right: 0%;
width: 0px;
height: 0px;
}
.fold:before {
border-bottom: 60px solid #BBB;
border-right: 60px solid transparent;
-webkit-box-shadow: -5px 5px 5px 5px rgba(0,0,0,0.1);
-moz-box-shadow: -5px 5px 5px 5px rgba(0,0,0,0.1);
box-shadow: -5px 5px 5px 5px rgba(0,0,0,0.1);
}
.fold:after {
border-top: 60px solid transparent;
border-left: 60px solid yellow;
}
<div class="page fold">
<h2>Dear Bettie</h2>
Will you please erase that darn red corner from this folded note love?<br><br>
Thanks xxx<br>Sandra
</div>