CSS Drop Shadow для CSS нарисованная стрелка - PullRequest
Новая
       6

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

16 голосов
/ 05 апреля 2011

Я хочу, чтобы стрелка, которая появляется при наведении 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');

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

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

Ответы [ 5 ]

20 голосов
/ 05 апреля 2011

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

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

-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 / треугольник-с тенью /

2 голосов
/ 03 марта 2013

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

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

 -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);
2 голосов
/ 12 апреля 2012

Благодарю 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);
}​

Предостережение

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

1 голос
/ 05 апреля 2011

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

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

0 голосов
/ 29 октября 2015

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

HTML: 

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

CSS: 

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

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

...