Comment faire un CSS pur hauteur et un effet de pliage vraiment transparent sur une image?

Question

Inspiré par this link et this link, je suis en train de faire l'effet pur de pliage CSS avec deux exigences: (!)

1. fond totalement transparent pour montrer un <IMAGE> derrière
2. pouvoir utiliser toute la hauteur de le <DIV> élément à l'intérieur (!)

J'ai essayé de faire le travail de mine mais le coin de topright ne devient pas transparent. Si je remplace ...

border-top: 60px solid red; 

avec

border-top: 60px solid transparent; 

alors l'arrière-plan de la boîte de rectangle apparaît à travers elle. Existe-t-il un moyen de résoudre cela avec une solution CSS pure? Si oui comment? Si non, alors quelles sont les alternatives qui se rapprochent de CSS? Le code/les coordinations devraient être lisibles, interprétables et facilement modifiables par les humains sans avoir besoin d'un programme basé sur un vecteur tel qu'inkscape.

La démo où je suis coincé:
https://jsfiddle.net/cg7hoyt3/

Answer 1

peut-être utiliser un linear-gradient au lieu d'une couleur unie comme arrière-plan à votre div primaire.

La largeur de la bordure et l'inclinaison du dégradé ont un rapport de 1/sqrt(2) = .7071.

Si vous utilisez des propriétés personnalisées CSS ou un préprocesseur CSS, cela devient beaucoup plus simple.

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

Comme suggéré dans les commentaires, cela peut être fait avec un masque d'écrêtage:

clip-path: polygon(0 0, 210px 0, 100% 60px, 100% 100%, 0 100%); 

Même si cela peut sembler un peu intimidant, il est vraiment très facile à lire: il suffit de lire les points un par un, en commençant par le coin supérieur gauche. Les points dessinent un polygone autour de ce qui sera visible. Notez que clip-mask fonctionnera uniquement avec les navigateurs modernes (IE + Edge non inclus). Voir Can I use pour la mise à jour du navigateur et Mozilla Plotform Status pour l'état actuel du développement.

Voici le 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>