CSS 绘制箭头的 CSS 投影
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5549594/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS Drop Shadow for CSS drawn arrow
提问by UrBestFriend
I want the arrow that appears when a div is hovered hereto also drop a shadow. The arrow is drawn from 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);
}
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.
仅将阴影设置粘贴到箭头中的问题是阴影应用于整个跨度框并导致框阴影而不是箭头的阴影。
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.
PS我想尽可能不使用explorercanvas，因为我试图最小化html中的脚本标签。但是，如果必须这样做，请提供代码。
回答by Blowsie
Applying the box shadow to the css border triangle will not work, it will only ever apply it to the whole element box.
将框阴影应用于 css 边框三角形将不起作用，它只会将其应用于整个元素框。
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
您可以通过将 css 边框三角形更改为方形 div，使用 css3 将其旋转 45 度，然后应用 box-shadow 来实现您想要做的事情
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
position: absolute;
Edit:Updated
编辑：更新
Edit:See the link below for another approach using css contentand :after
编辑：有关使用 css 的另一种方法，请参阅下面的链接content和:after
回答by Error 454
Credit to Blowsie for the original answer that led me to the following implementation. Here is a working jsfiddle implementationfor Chrome. The relevant CSS:
归功于 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);
}?
Caveat
警告
If the content of your box overlaps the arrow then the illusion is broken. You might try working around this by changing the z-index of the arrow to be behind the box but this will cause the box drop-shadow to be rendered on top of the arrow. Add sufficient padding to the box content so that this doesn't happen.
如果盒子的内容与箭头重叠，那么这种错觉就会被打破。您可以尝试通过将箭头的 z-index 更改为框后面来解决此问题，但这会导致框阴影呈现在箭头的顶部。为框内容添加足够的填充，以免发生这种情况。
回答by ProVega
I haven't tested other browsers, but I noticed that CSS Arrow Pleaseuses a neat little trick
我没有测试过其他浏览器，但我注意到CSS Arrow Please使用了一个巧妙的小技巧
Using this syntax on the parent box will also add a dropshadow to the generated "arrow":
在父框上使用此语法还会为生成的“箭头”添加阴影：
-webkit-filter: drop-shadow(0 1px 4px rgba(0,0,0,0.3));
But using this syntax will not?:
但是使用这种语法不会？：
-webkit-box-shadow: 2px 3px 8px 0px rgba(0, 0, 0, 0.04);
回答by Paul D. Waite
I'm afraid drop shadows only apply to the element box, rather than the angle of the border corners. If you want an arrow like this with a drop-shadow, I'm afraid you'll have to make it as a PNG image, with the drop shadow in the image.
恐怕阴影只适用于元素框，而不是边框角的角度。如果你想要一个像这样带有阴影的箭头，恐怕你必须把它做成一个 PNG 图像，在图像中带有阴影。
CSS generally only produces square boxes. The border trick to make a pointy arrow here with CSS is a clever hack.
CSS 通常只生成方形框。使用 CSS 在这里制作尖箭头的边框技巧是一个聪明的技巧。
回答by Kaloyan Stamatov
Another way to achieve arrow with shadow, which will work for all the browsers is to use html triangle character in unicode.
另一种实现带阴影箭头的方法，适用于所有浏览器，是在 unicode 中使用 html 三角形字符。
HTML:
HTML：
<span class="arrow">?</span>
CSS:
CSS：
.arrow {
color: red;
text-shadow: 0 0 20px black;
transform: scaleY(1.4)
}
Since that is rendered as regular text you may apply the text-shadowproperty. For customize the arrow dimensions (want to add extra width or height or skew the arrow) css3 transform propertyis the key. Here is reference with html characters: http://www.copypastecharacter.com/graphic-shapesEnjoy
由于它呈现为常规文本，您可以应用text-shadow属性。对于自定义箭头尺寸（想要添加额外的宽度或高度或倾斜箭头）css3 变换属性是关键。这里是 html 字符的参考：http: //www.copypastecharacter.com/graphic-shapes享受
