将阴影应用于三角形svg

我想知道如何将阴影应用于svg图像（例如三角形）。我发现像polyfill这样的解决方案，但它不能按照我想要的方式工作。我做了一个JSFiddle向你展示我想给我一个影子。将阴影应用于三角形svg

我的HTML：

<div class="spikes"></div>

我的CSS：

body { 
    background-color: #ccc; 
} 
.spikes { 
    margin-top: 20px; 
    width: 250px; 
    transform: rotate(180deg); 
    background-image: url("data:image/svg+xml;base64,PHN2ZyBpZD0iTGFhZ18xIiBkYXRhLW5hbWU9IkxhYWcgMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2aWV3Qm94PSIwIDAgMjUgMjUiPg0KICA8ZGVmcz4NCiAgICA8c3R5bGU+DQogIC AgICAuY2xzLTEgew0KICAgICAgICBmaWxsOiAjZmZmZmZmOw0KICAgICAgfQ0KICAgIDwvc3R5bGU+DQog IDwvZGVmcz4NCiAgPHRpdGxlPmthcnRlbDwvdGl0bGU+DQogIDxwb2x5Z29uIGNsYXNzPSJjbHMtMSIgcG9pbnRzPSIyNSAxOS43IDI1IDI1IDAgMjUgMCAyMC4yNSAxMi43NyA3LjQ3IDI1IDE5LjciLz4NCjwvc3ZnPg0K"); 
    height: 20px; 
    position: absolute; 
    max-width: 1000px; 
    transition: 0.75s; 
    -webkit-box-shadow: -2px -2px 5px 0px rgba(97,97,97,1); 
    -moz-box-shadow: -2px -2px 5px 0px rgba(97,97,97,1); 
    box-shadow: -2px -2px 5px 0px rgba(97,97,97,1); 
}

来源

2016-12-15 Jason

@Paulie_D嗨，它不可能是一个内嵌的图像，因为我得有多重那些SVG的旁边。我知道我可以计算宽度，并在此基础上创建图像的数量，但我不喜欢这个想法。 – Jason

不能阴影应用到background-image因为它是一个CSS属性，而不是一个元素。

什么你可以做的是应用filter:drop-shadow到元素代替。

提供的SVG具有透明度/阿尔法它会是这个样子：

body { 
 
    background-color: #ccc; 
 
} 
 
.spikes { 
 
    margin-top: 20px; 
 
    width: 250px; 
 
    transform: rotate(180deg); 
 
    background-image: url("data:image/svg+xml;base64,PHN2ZyBpZD0iTGFhZ18xIiBkYXRhLW5hbWU9IkxhYWcgMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2aWV3Qm94PSIwIDAgMjUgMjUiPg0KICA8ZGVmcz4NCiAgICA8c3R5bGU+DQogICAgICAuY2xzLTEgew0KICAgICAgICBmaWxsOiAjZmZmZmZmOw0KICAgICAgfQ0KICAgIDwvc3R5bGU+DQogIDwvZGVmcz4NCiAgPHRpdGxlPmthcnRlbDwvdGl0bGU+DQogIDxwb2x5Z29uIGNsYXNzPSJjbHMtMSIgcG9pbnRzPSIyNSAxOS43IDI1IDI1IDAgMjUgMCAyMC4yNSAxMi43NyA3LjQ3IDI1IDE5LjciLz4NCjwvc3ZnPg0K"); 
 
    height: 20px; 
 
    position: absolute; 
 
    max-width: 1000px; 
 
    transition: 0.75s; 
 
    filter: drop-shadow(-1px -1px 1px black); 
 
}

<div class="spikes"></div>

来源

2016-12-15 15:11:17

非常感谢你的工作！ – Jason

将阴影应用于三角形svg

回答

相关问题