css page curl effect drop shadow with rotate

css, css-shapes, css-transforms, html

Solution

Nice job!

As a workaround, you can put a DIV inside the rotated div, with background-colour set to underneath one, and full height and width, like this: 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;
}

Problem

I'm attempting to rotate a div to which I have applied a 'page curl' drop shadow. The page curl drop shadow effect is working fine until I rotate the div, at which point the drop shadow elements show up through the div (z-index issue)? I've also noticed that if I have an image as the div content, I don't get this issue, but I'd love to get it working for a div with text content. Any suggestions? Here's the code: CSS (vendor prefixes removed to shorten code, but the problem is occurring across all modern browsers): ``` .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 --> ``` And here's a jsfiddle: http://jsfiddle.net/U8qY3/5/

Original source