CSS3 / HTML5 的盒子阴影不均匀？

我正在尝试为网站创建不均匀的阴影效果，请参阅下面的示例来了解我需要实现的目标：

不幸的是，我不认为这可以用 CSS3 来完成，据我所知， box-shadow 属性只能用于创建均匀分布的阴影。

然而，我对 CSS3/HTML5 的了解并不多，所以我想知道是否有人知道如何在不诉诸我宁愿避免的图像/额外 div/相对和绝对定位的情况下实现这一目标？

这是我最接近您的图像预览的内容，您可以将它们包装在定位的相对 div 中并相应地设置位置

Demo http://jsfiddle.net/xKWj4/

HTML

<div class="container"></div>
<div class="shadow"></div>

CSS

.container {
    width: 300px;
    height: 200px;
    margin: 50px;
    background-color: #eeeeee;
    z-index: 1;
}


.shadow {
    -ms-transform: rotate(2deg); /* IE 9 */
    -webkit-transform: rotate(2deg); /* Safari and Chrome */
    -o-transform: rotate(2deg); /* Opera */
    -moz-transform: rotate(2deg); /* Firefox */
    box-shadow: 0 6px 16px -6px black;
    height: 20px;
    width: 300px;
    position: absolute;
    top: 225px;
    z-index: -1;
    left: 50px;
}