Postato carta css3

Question

Sto cercando di creare un documento pubblicato in puro css3 con transizioni e box-shadow. Finora ho realizzato una carta con le ombre su entrambi i lati, ma vorrei far sembrare questo:

è che anche possibile senza immagini?

.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

Ecco il mio tentativo, giusto per dare l'idea.

Richiede un sacco di regolazione artistica, ma ha tutti gli elementi necessari.

Incluso retro-visibilità: nascosto; grazie a Harry suggerimento

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