如何在HTML/CSS中沿SVG的对角线添加阴影效果？

发布于 2025-02-06 23:00:43 字数 541 浏览 3 评论 0原文

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

最终看起来像这样：

我想沿蓝色和红色相遇的对角线添加阴影效果。我该怎么做？

原文

I have a SVG defined in HTML like this:

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

which ends up looking like this:

I want to add a shadow effect along the diagonal where the blue and red meet. How can I accomplish this?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

嘿看小鸭子会跑 2025-02-13 23:00:43

您可以在三角形SVG路径上使用过滤器：drop-shadow（）。仅在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>

You can use filter: drop-shadow() on the triangle svg path. It's only not supported in IE11 and 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>

You can do the drop shadow filter style inline on the path if you want.

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

回复收藏 0 原文

~没有更多了~