我在 HTML 中定義了一個 SVG，如下所示：
<svg style="height: 28px; background-color: 'blue'; " viewBox="0 0 436 217"
preserveAspectRatio="none" class="Tagline-triangle" fill="#EAEAEA" xmlns="http://www.w3.org/2000/svg">
<path d="M0 0H436V217L0 0Z"></path>
</svg>
最終看起來像這樣：
我想在藍色和紅色相遇的對角線上添加陰影效果。我怎樣才能做到這一點？
uj5u.com熱心網友回復：
您可以filter: drop-shadow()在三角形 svg 路徑上使用。只有IE11和opera mini不支持。
.shadow {
filter: drop-shadow(3px 15px 20px rgb(0 0 0 / 1));
}<svg viewBox="0 0 436 217" style="background-color: blue; height: 28px; width: 100%;" preserveAspectRatio="none" class="Tagline-triangle" fill="#ff0000" xmlns="http://www.w3.org/2000/svg">
<path class="shadow" d="M0 0H436V217L0 0Z"></path>
</svg>如果需要，您可以在路徑上行內陰影過濾器樣式。
<svg viewBox="0 0 436 217" style="background-color: blue; height: 28px; width: 100%;" preserveAspectRatio="none" class="Tagline-triangle" fill="#ff0000" xmlns="http://www.w3.org/2000/svg">
<path d="M0 0H436V217L0 0Z" style="filter: drop-shadow(3px 15px 20px rgb(0 0 0 / 1));"></path>
</svg>轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/489935.html