Gepostetes Papier css3

Question

Ich versuche, ein gepostete Papier in reinem css3 mit Übergängen und Box-Schatten zu erstellen. Bisher habe ich ein Papier mit Schatten auf beiden Seiten erreicht, aber ich möchte es wie folgt aussehen:

Ist das überhaupt möglich ohne Bilder?

.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

Hier ist mein Versuch, nur Sie auf die Idee zu geben.

braucht viel künstlerische Anpassung, sondern hat alle Elemente erforderlich.

Enthaltene Rückseitensicht: versteckt; dank Harry Vorschlag

.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>