CSS下拉阴影为CSS绘制箭头 [英] CSS Drop Shadow for CSS drawn arrow

问题描述

我想要在悬停div时显示的箭头此处也可以一个影子。箭头是从css绘制的：

I want the arrow that appears when a div is hovered here to also drop a shadow. The arrow is drawn from 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);
}

我要应用的阴影设置是：

The shadow setting I want to apply is:

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

将阴影设置粘贴到箭头中的问题是阴影应用于整个范围框并产生一个框阴影，而不是箭头的阴影。

The problem in just pasting the shadow setting into the arrow is that the shadow applies to the entire span box and results in a box shadow instead of an drop shadow for the arrow.

我想尝试尽可能不使用 explorercanvas ，因为我试图最小化脚本标签在html 。

P.S. I want to try as much as possible to not use explorercanvas, since I'm trying to minimize script tags in the html. However, if its a must please do provide the code.

推荐答案

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

Applying the box shadow to the css border triangle will not work, it will only ever apply it to the whole element box.

您可以通过将css边框三角形更改为正方形div，旋转45 degree使用css3然后应用box-shadow

You can achieve what you are trying to do by changing your css border triangle into a square div, rotating it 45 degrees using css3 and then applying the box-shadow

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

编辑：
已更新

编辑：
请参阅下面的链接，了解使用css content 和：

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

这篇关于CSS下拉阴影为CSS绘制箭头的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！