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

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

P.S。我想尝试尽可能不使用explorercanvas，因为我正在尝试最小化html中的脚本标记。但是，如果必须，请提供代码。

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/

Answer 2

归功于Blowsie的原始答案，这使我进行了以下实施。这是Chrome的working jsfiddle implementation。相关的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更改为框后面来解决此问题，但这会导致框阴影呈现在箭头顶部。为盒子内容添加足够的填充，这样就不会发生。

Answer 3

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

Answer 4

我担心投影仅适用于元素框，而不是边角的角度。如果你想要一个带有阴影的箭头，我担心你必须将它作为PNG图像，并在图像中使用阴影。

CSS通常只生产方框。使用CSS制作尖箭头的边界技巧是一个聪明的黑客。

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转换属性是关键。以下是html字符的引用：http://www.copypastecharacter.com/graphic-shapes 享受

用于CSS绘制箭头的CSS投影

5 个答案: