effetto di ricciolo pagina css drop shadow con rotazione

Question

Sto tentando di ruotare un div a cui ho applicato un'ombreggiatura di "arricciatura pagina".

L'effetto di ombreggiatura della pagina ricciolo funziona perfettamente finché non si ruota il div, a questo punto gli elementi dell'ombra esterna vengono visualizzati attraverso il div (problema z-index)?

Ho anche notato che se ho un'immagine come contenuto div, non ho questo problema, ma mi piacerebbe farlo funzionare per un div con contenuto di testo. Eventuali suggerimenti?

Ecco il codice:

CSS (prefissi vendor rimossi per accorciare il codice, ma il problema si verifica in tutti i browser moderni):

.shadow {border:1px solid #ccc;position:relative;width:300px;height:116px;background-color:#ededed;} 

.shadow:before, .shadow:after {    
    bottom:13px; 
    content: ""; 
    position: absolute; 
    z-index: -1; 
    -moz-transform: rotate(-11deg); 
    box-shadow: 0 15px 5px rgba(0, 0, 0, 0.2); 
    height: 50px; 
    max-width: 50%; 
    width: 50%; 
    left:3px; 
} 
.shadow:after { 
    -moz-transform: rotate(11deg); 
    left: auto; 
    right: 2px; 
} 

.rotate{ 
    -moz-transform: rotate(4deg); 
} 

HTML:

<div class="shadow">this is the first div</div> <!-- this one is ok --> 
    <div class="shadow rotate">this is the second div</div> <!-- this has the issue --> 
    <div class="shadow rotate"><img src="//www.google.com/logos/2012/Teachers_Day_Alt-2012-hp.jpg" width="300" height="116"></div> <!-- this one is ok --> 

Ed ecco a jsfiddle: http://jsfiddle.net/U8qY3/5/

Answer 1

Bel lavoro!

Per risolvere il problema, si può mettere un DIV all'interno del div ruotato, con background-color impostata sotto uno, e piena altezza e larghezza, in questo modo: http://jsfiddle.net/U8qY3/6/

HTML

<div class="shadow rotate"> 
    <div class="workaround">this is the second div</div>   
</div> 

CSS

.workaround{ 
    height: 100%; 
    width: 100%; 
    background-color: #ededed; 
}