Posté le papier css3

Question

J'essaye de créer un papier posté dans le css3 pur avec des transitions et l'ombre de boîte. Jusqu'à présent, j'ont accompli des deux côtés d'un papier avec des ombres, mais je voudrais la faire ressembler à ceci:

Est-ce même possible sans images?

.shadow { 
 
    width: 150px; 
 
    height: 150px; 
 
    background-color: yellow; 
 
    position: relative; 
 
} 
 
.shadow:after { 
 
    position: absolute; 
 
    right: 10px; 
 
    left: auto; 
 
    -webkit-transform: skew(8deg) rotate(3deg); 
 
    -moz-transform: skew(8deg) rotate(3deg); 
 
    -ms-transform: skew(8deg) rotate(3deg); 
 
    -o-transform: skew(8deg) rotate(3deg); 
 
    transform: skew(8deg) rotate(3deg); 
 
}

<div class="shadow"> 
 
    edit this even further 
 
</div>

Answer 1

Voici ma tentative, juste pour vous donner l'idée.

Nécessite beaucoup d'ajustement artistique, mais a tous les éléments nécessaires.

Face arrière-visibilité incluse: masquée; grâce à la suggestion Harry

.test { 
 
    width: 300px; 
 
    height: 300px; 
 
    left: 50px; 
 
    top: 50px; 
 
    border-bottom-left-radius: 250px 45px; 
 
    position: absolute; 
 
    overflow: hidden; 
 
    transform: rotate(-19deg); 
 
    box-shadow: -9px 10px 31px 6px gray; 
 
    backface-visibility: hidden; 
 
} 
 

 
.test:after { 
 
    content: ""; 
 
    width: 100%; 
 
    height: 100%; 
 
    position: absolute; 
 
    background-color: yellowgreen; 
 
    border-bottom-left-radius: 45px 250px; 
 
    background-image: radial-gradient(circle at 50px 180px, rgba(255,255,255,0.3), transparent 70px), 
 
    radial-gradient(circle at 85px 215px, rgba(255,255,255,0.4), transparent 70px), 
 
    radial-gradient(circle at 120px 250px, rgba(255,255,255,0.3), transparent 70px); 
 
    box-shadow: -9px 10px 14px 22px gray; 
 
}

<div class="test"></div>