Здравейте, Трябва да сложа сянка под фигура, която съм направил с CSS. Самата фигура съм я създал с бордъри. Ето и кода:

<div class="banner-slider-outer"></div>

.banner-slider-outer{	height: 0;	width: 0;	border-left: 18px solid transparent;	border-right: 144px solid #ab3003;	border-bottom: 43px solid #ab3003;	border-top: 43px solid #ab3003;		float: right;	display: block;	margin: 25px -12px 0 0;	position: relative;	-webkit-filter: drop-shadow(5px 5px 4px rgba(0,0,0,0.75));	   -moz-filter: drop-shadow(5px 5px 4px rgba(0,0,0,0.75));	    -ms-filter: drop-shadow(5px 5px 4px rgba(0,0,0,0.75));	     -o-filter: drop-shadow(5px 5px 4px rgba(0,0,0,0.75));	        filter: drop-shadow(5px 5px 4px rgba(0,0,0,0.75));}

Всички знаете какво се получава с обикновен box-shadow. Затова потърсих и намерих друг начин: Използвах drop-shadow филтър (трябва да има сложен Modernizr), но нещо не се получават нещата. Моля дайте съвет и ако може решение на този казус.

Виж тука как е обяснено :

http://demosthenes.info/blog/598/boxshadow-property-vs-dropshadow-filter-a-complete-comparison

 

.shadowfilter

{ -webkit-filter: drop-shadow(12px 12px 7px rgba(0,0,0,0.5));
 filter: url(/assets/svg/shadow.svg#drop-shadow);
 -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=135, Color='rgba(0,0,0,0.3)')";
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=135, Color='rgba(0,0,0,0.3)');
}

Редактирано 30 януари 201313 г. от syneidesys (преглед на промените)