| <!DOCTYPE html> |
| <html> |
| <head> |
| <style type="text/css" media="screen"> |
| .wrapper { |
| width: 300px; |
| height: 300px; |
| -webkit-box-sizing: border-box; |
| padding: 100px; |
| margin: 20px; |
| display: inline-block; |
| } |
| |
| .top { |
| height: 150px; |
| padding: 25px 100px; |
| } |
| |
| |
| .box { |
| position: relative; |
| width: 100px; |
| height: 100px; |
| display: inline-block; |
| } |
| |
| </style> |
| </head> |
| <body> |
| |
| <p>The shadow should look identical relative to the box in each case.</p> |
| <div class="top wrapper"> |
| <div class="box" style="box-shadow: 0 10px 20px black; -webkit-transform: scale(2, 1)"></div> |
| </div> |
| |
| <div class="top wrapper"> |
| <div class="box" style="box-shadow: 0 10px 20px black; -webkit-transform: rotate(45deg)"></div> |
| </div> |
| |
| <div class="wrapper"> |
| <div class="box" style="box-shadow: 0 10px 20px black; -webkit-transform: rotate(45deg) scale(1.7)"></div> |
| </div> |
| |
| <div class="wrapper"> |
| <div class="box" style="box-shadow: 0 10px 20px black; -webkit-transform: rotate(45deg) scale(0.8)"></div> |
| </div> |
| |
| </body> |
| </html> |
