CSS绘制箭头的阴影效果

Question

我希望当鼠标悬停在一个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，因为我试图将HTML中的脚本标签最小化。但是，如果必须使用，请提供代码。

- UrBestFriend

Answer 1

将盒子阴影应用到 CSS 边框三角形不起作用，它只会将其应用于整个元素框。

您可以通过将 CSS 边框三角形更改为正方形 div，使用 CSS3 旋转它45度，然后应用盒子阴影来实现您想要做的事情。

-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/

- Blowsie

---

这可能是你只使用 CSS 能够实现的最接近的效果。当然，这仅适用于你的三角形有一个直角的情况。你还需要调整 z-index 来确保旋转的盒子在主盒子的后面，但在主盒子的阴影前面（嗯，有点棘手？）。最后，如果你需要支持 IE 浏览器，你已经会使用 filter 样式来创建阴影，要注意当应用旋转时滤镜如何相互作用（或不作用）。 - Spudley

此外，我并不知道BasicImage支持45度旋转；我认为除了90/180/270度之外的任何角度都必须使用Matrix滤镜。参考 http://msdn.microsoft.com/en-us/library/ms532918%28v=vs.85%29.aspx ，但如果您有更好的链接，我很想看看。 - Spudley

刚刚添加了-o-transform: rotate(45deg);，现在Opera可以正常工作了。 - UrBestFriend

@UrBestFriend - 谢谢，我已经添加了Opera供应商特定的代码，但是我不知道它是否适用于IE6，因为我和我的公司不再为其开发。 - Blowsie

@UrBestFriend - 你成功根据spudleys的评论使旋转工作了吗？ - Blowsie

Answer 2

我没有测试其他浏览器，但我注意到 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);   

- ProVega

Answer 3

原文意思是：感谢Blowsie提供的原始答案，它启发了我以下的实现。这是一个适用于Chrome的工作jsfiddle实现。相关的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-index 值调低来解决这个问题，但这会导致框的阴影显示在箭头上方。为框的内容添加足够的填充以避免发生这种情况。

- Error 454

Answer 4

很抱歉，阴影只适用于元素框而不是边框角的角度。如果您想要带有阴影的箭头，则必须将其制作为PNG图像，并在图像中添加阴影。

CSS通常只生成方形框。使用CSS制作尖箭头的边框技巧是一个聪明的hack。

- Paul D. Waite

Answer 5

另一种实现带阴影箭头的方法，适用于所有浏览器，是使用Unicode中的HTML三角形字符。

HTML：

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

CSS：

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

由于该箭头被渲染为常规文本，您可以应用text-shadow属性。要自定义箭头尺寸（添加额外宽度或高度或倾斜箭头），css3 transform property是关键。

这里有一个带有HTML字符的参考链接：http://www.copypastecharacter.com/graphic-shapes

享受吧！

- Kaloyan Stamatov