css三角形上的盒子阴影不起作用答案

【问题标题】：box-shadow on css triangle not workingcss三角形上的盒子阴影不起作用
【发布时间】：2015-11-06 07:10:14
【问题描述】：

似乎不可能在我的 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 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;
}

http://jsfiddle.net/2dmJp/2/

【问题讨论】：

标签： css

【解决方案1】：

你可以使用过滤器：

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

http://jsfiddle.net/Rn37T/1/

IE9 及更早版本不支持。

【讨论】：

【解决方案2】：

使用变换旋转的跨浏览器解决方案： codepen.io/ryanmcnz/pen/JDLhu

【讨论】：

这几乎可以工作，但它在 Firefox 中并不漂亮（测试 v42：一些灰线可见）