css三角形上的框阴影不起作用
在我的css三角形上应用阴影似乎是不可能的?其他示例之所以有效,是因为它们的标记不同css三角形上的框阴影不起作用,css,Css,在我的css三角形上应用阴影似乎是不可能的?其他示例之所以有效,是因为它们的标记不同 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 transpa
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及更早版本中不支持它。使用transform rotate的跨浏览器解决方案:
codepen.io/ryanmcnz/pen/JDLhu这几乎可以正常工作,但在firefox中并不漂亮(经过测试的v42:可以看到一些灰线)