2016-11-07 74 views
0

我正在使用SVG/Path來生成一個大的向上指向的三角形...有關某些背景信息,請參閱下面的相關鏈接。在SVG「路徑」元素/三角形的兩側生成內部陰影效果

Background Info

我所試圖做的就是添加插圖,模糊的影子(simiar到的box-shadow)在三角形的兩條邊(左上和右上),但不是基礎三角形。還試圖減弱陰影,使其不觸及三角形的底部。下面的鏈接是一個粗略的截圖,但並不準確,我想要做什麼。

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>

在此先感謝,任何幫助是極大的apprecizted ...

回答

0

添加灰色在三角形後面的形狀代表陰影。然後模糊它。

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

+0

感謝這個貢獻......我認爲這是一個很好的開始。然而有一件事仍然讓我感到沮喪。我正在尋找這種形狀,以100%的視角寬度和靈活/移動響應,就像這個例子。有沒有辦法用你的代碼片段來實現這一點?任何幫助是極大的讚賞。 – user1447958