CSS 绘制箭头的 CSS 投影

Question

我想要悬停 div 时出现的箭头 here也投下影子。箭头是从 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');

仅将阴影设置粘贴到箭头中的问题是阴影应用于整个跨度框并导致箭头的框阴影而不是阴影。

附言我想尽可能不使用 explorercanvas ，因为我试图最小化 html 中的脚本标签。但是，如果这是必须的，请提供代码。

Answer 1

将框阴影应用于 css 边框三 Angular 形是行不通的，它只会应用于整个元素框。

您可以通过将 css 边框三 Angular 形更改为正方形 div，使用 css3 将其旋转 45 度，然后应用 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/