सीएसएस पृष्ठ कर्ल प्रभाव ड्रॉप छाया के साथ छाया

Question

मैं एक div घुमाने की कोशिश कर रहा हूं जिसमें मैंने 'पेज कर्ल' ड्रॉप छाया लागू की है।

पृष्ठ कर्ल ड्रॉप छाया प्रभाव ठीक काम कर रहा है जब तक कि मैं div घुमाता हूं, जिस बिंदु पर ड्रॉप छाया तत्व div (z-index issue) के माध्यम से दिखाई देते हैं?

मैंने यह भी देखा है कि अगर मेरे पास div सामग्री के रूप में एक छवि है, तो मुझे यह समस्या नहीं मिलती है, लेकिन मुझे टेक्स्ट सामग्री के साथ एक div के लिए काम करना अच्छा लगेगा। कोई सुझाव?

कोड यह रहा:

सीएसएस (कोड को छोटा करने हटाया विक्रेता उपसर्गों, लेकिन समस्या यह सभी आधुनिक ब्राउज़र में उत्पन्न हो रही है):

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

और यहाँ है एक jsfiddle: http://jsfiddle.net/U8qY3/5/

Answer 1

अच्छी नौकरी!

समाधान के लिए, यदि आप एक DIV घुमाए गए div अंदर पृष्ठभूमि रंग एक नीचे करने के लिए सेट है, और पूर्ण ऊंचाई और चौड़ाई के साथ इस तरह रख सकते हैं,,: http://jsfiddle.net/U8qY3/6/

एचटीएमएल

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

सीएसएस

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