SVGの "Path"要素/三角形の2つの部分に内影効果を生成

Question

SVG/Pathを使用して大きな上向き三角形を生成しています...背景情報については、下の関連リンクを参照してください。私がやろうとしています何

Background Info

はめ込み、三角形の両側にぼやけた影（simiarボックスシャドウをするために）（左上と右上）ではなく、のベースを追加することです三角形。また、三角形の底辺に触れないように、影を先細にするようにしてください。次のリンクは、私が何をしようとしているのか、正確ではないが、大まかではあるが、スクリーンショットです。ここで

Shadow Example

私がこれまで持っているコードです：事前に

svg#bigTriangleColor { 
 
    pointer-events: none; background: red; 
 
} 
 
.container svg { 
 
    display: block; 
 
} 
 
svg:not(:root) { 
 
    overflow: hidden; 
 
} 
 
#bigTriangleColor path { 
 
    fill: #EEEEEE; 
 
    stroke: #EEEEEE; 
 
    stroke-width: 2; 
 
}

<svg id="bigTriangleColor" xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100" viewBox="0 0 100 100" preserveAspectRatio="none"> 
 
<path d="M0 100 L50 2 L100 100 Z"></path> 
 
</svg>

おかげで、任意のヘルプは大幅に...

Answer 1

をappreciztedされるグレーを追加します。影を表現するために三角形の後ろの形をしています。その後、それをぼかします。この貢献のため

<svg width="100%" height="100" viewBox="0 0 600 100" preserveAspectRatio="none"> 
 
    <defs> 
 
    <filter id="blur"> 
 
     <feGaussianBlur in="SourceGraphic" stdDeviation="5"/> 
 
    </filter> 
 
    </defs> 
 
    
 
    <polygon points="0,0, 600,0, 600,80, 300,20, 0,80" fill="#999" filter="url(#blur)"/> 
 
    <polygon points="0,0, 600,0, 600,65, 300,20, 0,65" fill="black"/> 
 
</svg>