三角形に影をつけるsvg

Question

私はどのように影をsvgの画像（例えば三角形）に適用できるのだろうかと思っていました。私はpolyfillのようなソリューションを見つけましたが、私が望んでいた方法ではうまく機能しませんでした。私はJSFiddleを作って、私が何を影にしたいのかを見せてくれました。

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

Answer 1

それはCSSプロパティとない要素だとあなたはbackground-imageに影を適用することはできません。

何する行う代わりに要素に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>