CSS Drop Shadow для CSS рисованной стрелки

Я хочу, чтобы стрелка появлялась, когда div витал здесь, чтобы также отбросить тень. Стрелка выводится из css:

.arrow {
position:absolute;
margin-top:-50px;
left:80px;
border-color: transparent transparent transparent #ccff66;
border-style:solid;
border-width:20px;
width:0;
height:0;
z-index:3;
_border-left-color: pink;
_border-bottom-color: pink;
_border-top-color: pink;
_filter: chroma(color=pink);
}

Настройка тени, которую я хочу применить, это:

-moz-box-shadow: 1px 0px 5px #888;
-webkit-box-shadow: 1px 0px 5px #888;
box-shadow: 1px 0px 5px #888;
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=0, Color='#888888')";
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=0, Color='#888888');

Проблема при вставке тени в стрелку заключается в том, что тень применяется ко всему окну span и приводит к теневой коробке вместо тени для стрелки.

P.S. Я хочу попытаться как можно больше не использовать explorercanvas, так как я пытаюсь свести к минимуму теги script в html. Однако, если это необходимо, пожалуйста, укажите код.

Ответ 1

Применение тени тэга к треугольнику границы css не будет работать, оно только применит его ко всему элементу.

Вы можете добиться того, что вы пытаетесь сделать, изменив треугольник границы css на квадратный div, повернув его на 45 градусов с помощью css3, а затем применив тень

-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
position: absolute;

Edit: Обновлено

Edit: См. Ссылку ниже для другого подхода, используя css content и :after

http://css-tricks.com/triangle-with-shadow/

Ответ 2

Благодарим Blowsie за оригинальный ответ, который привел меня к следующей реализации. Ниже приведена работающая реализация jsfiddle для Chrome. Соответствующий CSS:

/* Make an arrow */
.arrow{
    background-color: pink;
    box-shadow: 3px 3px 4px #000;
    width: 30px;
    height: 30px;

    /* Translate the box up by width / 2 then rotate */
    -webkit-transform: translateY(-15px) rotate(45deg);
}

Caveat

Если содержимое вашего окна перекрывает стрелку, тогда иллюзия нарушается. Вы можете попробовать обойти это, изменив z-указатель стрелки, который будет стоять за рамкой, но это приведет к отображению тени в верхней части стрелки. Добавьте достаточное дополнение к содержимому окна, чтобы этого не произошло.

Ответ 3

Я не тестировал другие браузеры, но заметил, что CSS Arrow Пожалуйста, использует аккуратный маленький трюк

Использование этого синтаксиса в родительском поле также добавит dropshadow к сгенерированной "стрелке":

 -webkit-filter: drop-shadow(0 1px 4px rgba(0,0,0,0.3));

Но используя этот синтаксис не будет?:

-webkit-box-shadow:  2px 3px 8px 0px rgba(0, 0, 0, 0.04);

Ответ 4

Я боюсь, что тени тени применимы только к элементу, а не к угловым углам. Если вы хотите стрелку, подобную этой, с тенью, я боюсь, что вам придется делать это как изображение PNG с теневой теневой копией изображения.

CSS обычно создает только квадратные прямоугольники. Приграничный трюк, чтобы сделать здесь заметную стрелку с CSS, - это умный взлом.

Ответ 5

Другим способом достижения стрелки с тенью, который будет работать для всех браузеров, является использование символа треугольника html в юникоде.

HTML:

 <span class="arrow">▶</span>

CSS

.arrow {
  color: red;
  text-shadow: 0 0 20px black;
  transform: scaleY(1.4)
}

Так как это отображается как обычный текст, вы можете применить свойство text-shadow. Для настройки размеров стрелок (хотите добавить дополнительную ширину или высоту или перекосить стрелку) ключ css3 transform. Вот ссылка на html-символы: http://www.copypastecharacter.com/graphic-shapes Наслаждайтесь