在SVG“路径”元素/三角形的两侧生成内部阴影效果

我正在使用SVG/Path来生成一个大的向上指向的三角形...有关某些背景信息，请参阅下面的相关链接。在SVG“路径”元素/三角形的两侧生成内部阴影效果

我所试图做的就是添加插图，模糊的影子（simiar到的box-shadow）在三角形的两条边（左上和右上），但不是基础三角形。还试图减弱阴影，使其不触及三角形的底部。下面的链接是一个粗略的截图，但并不准确，我想要做什么。

这里是我的代码至今：

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>

在此先感谢，任何帮助是极大的apprecizted ...

来源

2016-11-07 user1447958

添加灰色在三角形后面的形状代表阴影。然后模糊它。

<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>

来源

2016-11-08 05:52:34

感谢这个贡献......我认为这是一个很好的开始。然而有一件事仍然让我感到沮丧。我正在寻找这种形状，以100％的视角宽度和灵活/移动响应，就像这个例子。有没有办法用你的代码片段来实现这一点？任何帮助是极大的赞赏。 – user1447958

在SVG“路径”元素/三角形的两侧生成内部阴影效果

回答

相关问题