CSS绘制箭头的CSS阴影

前端之家收集整理的这篇文章主要介绍了CSS绘制箭头的CSS阴影前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我想要当一个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,Color='#888888');

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

附:我想尝试尽量不要使用explorercanvas,因为我试图最小化HTML中的脚本标签.但是,如果它必须请提供代码.

解决方法

将框阴影应用到CSS边框三角形将不起作用,它将只会应用于整个元素框.

您可以通过将css边框三角形更改为正方形div,使用css3旋转45度,然后应用盒子阴影

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

编辑:
更新

编辑:
请参阅下面的链接使用css内容的另一种方法:after

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

原文链接:https://www.f2er.com/css/217172.html

猜你在找的CSS相关文章