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');

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

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


css shadow
person UrBestFriend    schedule 05.04.2011    source источник

Ответы (5)


arrow_upward
20
arrow_downward

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

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

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

Изменить: обновлено

Редактировать. См. ссылку ниже, чтобы узнать о другом подходе с использованием css content и :after.

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

person Blowsie    schedule 05.04.2011
comment
+1. Это, вероятно, самое близкое, что вы собираетесь получить, используя чистый CSS. Конечно, это работает, только если ваш треугольник имеет прямой угол. Вам также нужно будет поиграть с z-index, чтобы убедиться, что повернутый блок располагается за основным блоком, но перед тенью основного блока (хм, сложно?). Наконец, если вы поддерживаете IE, вы уже будете использовать стиль filter для тени; помните, как фильтры взаимодействуют (или нет) при применении поворота. - person Spudley; 05.04.2011
comment
Кроме того, я не знал, что BasicImage поддерживает поворот на 45 градусов; Я думал, что вам нужно было использовать фильтр Matrix для всего, кроме 90/180/270. Ссылка msdn.microsoft.com/en-us /library/ms532918%28v=vs.85%29.aspx, но если у вас есть лучшая ссылка, мне было бы интересно ее увидеть. - person Spudley; 05.04.2011
comment
@Blowsie: Просто поясню, совместимо ли это с IE6? Кроме того, как мне разрезать его на треугольник? - person UrBestFriend; 05.04.2011
comment
Только что добавил -o-transform: rotate(45deg); и это будет работать для Opera - person UrBestFriend; 05.04.2011
comment
@UrBestFriend - спасибо, я добавил специальный код производителя Opera, и я не знаю, работает ли это в IE6, поскольку моя компания и я больше не разрабатываю для него. - person Blowsie; 05.04.2011
comment
@Spudley Действительно, вращение = 5 недопустимо, спасибо, что указали на это. - person Blowsie; 05.04.2011
comment
@Blowsie: попробовал новые коды для IE, и, к сожалению, они не работают (даже для IE9). Я действительно ненавижу IE - person UrBestFriend; 05.04.2011
comment
@UrBestFriend - Вам удалось заставить ротацию работать на основе комментария Спадли? - person Blowsie; 05.04.2011
comment
@Blowsie: код работает только для IE9; для IE6.7 и 8 весь макет страницы нарушен ... хотя я не уверен, что это поворот или другие фильтры. - person UrBestFriend; 05.04.2011
comment
Кстати, нашел этот хороший ресурс для поворотов и других эффектов cs3: css3please.com И это для градиентов: colorzilla.com/gradient-editor - person UrBestFriend; 05.04.2011
comment
@UrBestFriend — IE6/7/8 требует стиля filter с атрибутом Matrix для поворотов. IE9 использует стандартный CSS3 и не поддерживает filter, поэтому вы сможете использовать с ним стиль transform, хотя, возможно, для этого может потребоваться префикс -ms-. - person Spudley; 06.04.2011

arrow_upward
3
arrow_downward

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

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

 -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);
person ProVega    schedule 03.03.2013

arrow_upward
2
arrow_downward

Спасибо 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-индекс стрелки так, чтобы она находилась за рамкой, но это приведет к тому, что тень коробки будет отображаться поверх стрелки. Добавьте достаточный отступ к содержимому блока, чтобы этого не произошло.

person Error 454    schedule 12.04.2012

arrow_upward
1
arrow_downward

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

CSS обычно создает только квадратные блоки. Трюк с границей, чтобы сделать заостренную стрелку здесь с помощью CSS, — это умный хак.

person Paul D. Waite    schedule 05.04.2011

arrow_upward
0
arrow_downward

Еще один способ получить стрелку с тенью, который будет работать во всех браузерах, — это использовать треугольный символ 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 Наслаждайтесь

person Kaloyan Stamatov    schedule 29.10.2015