箱子阴影在css三角不工作 [英] box-shadow on css triangle not working
本文介绍了箱子阴影在css三角不工作的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
似乎不可能在我的css三角形上应用阴影?其他示例工作,因为他们的标记是不同的。
it seem impossible to apply shadow on my css triangle? other example work because their markup is different.
div:before{
content: "";
width: 0;
height: 0;
position: relative;
top: 15px;
border-style: solid;
border-width: 12px 12px 0 12px;
border-color: #000 transparent transparent transparent;
-webkit-transform: rotate(270deg);
-webkit-transform-origin: 50% 50%;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.1);
box-shadow: 0 1px 2px #000;
}
推荐答案
您可以使用过滤器:
div {
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid #f00;
-webkit-filter: drop-shadow(0 1px 2px #000);
filter: drop-shadow(0 1px 2px rgba(0,0,0,0.1));
}
它在IE9及更早版本中不受支持。
It isn't supported in IE9 and earlier.
这篇关于箱子阴影在css三角不工作的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文