Сами фигуры на CSS - это не универсальное решение... по этому и решение есть не универсальное...
Для Webkit:
-webkit-filter: drop-shadow(12px 12px 7px rgba(0,0,0,0.5));
filter: drop-shadow(12px 12px 7px rgba(0,0,0,0.5));
Для Firefox:
<svg height="0" xmlns="http://www.w3.org/2000/svg">
<filter id="drop-shadow">
<feGaussianBlur in="SourceAlpha" stdDeviation="2.2"/>
<feOffset dx="12" dy="12" result="offsetblur"/>
<feFlood flood-color="rgba(0,0,0,0.5)"/>
<feComposite in2="offsetblur" operator="in"/>
<feMerge>
<feMergeNode/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
</svg>
Для IE:
/* for IE 8 & 9 */
-ms-filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=12, OffY=12, Color='#444')";
/* For IE 5.5 - 7 */
filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=12, OffY=12,
Color='#444')";
В общем ссылка на саму
статью.
Небольшой пример для webkit из статьи "Геометрические фигуры на CSS"