在整个一侧向 SVG 添加阴影答案

【问题标题】：Adding a shadow to an SVG on the one whole side在整个一侧向 SVG 添加阴影
【发布时间】：2021-05-15 09:07:04
【问题描述】：

我正在尝试沿着这个形状分隔线（一个 svg、一个直角三角形）制作某种阴影，并且我正在使用 Tailwind CSS 框架。

我的问题是在最左边的边缘，因为三角形很小，没有阴影。我希望的结果是有一个阴影笼罩，

这是我目前拥有的 HTML（注意，使用 tailwind css 制作）：

<div class="relative h-20 mb-20">
    <svg class="w-full h-20 fill-current text-white shadow-bottom" viewBox="0 0 100 100" preserveAspectRatio="none">
        <polygon points="0,0 100,0 100,100" />
    </svg>
</div>

这是我正在使用的阴影底部的 CSS：

.shadow-bottom {
  -webkit-filter: drop-shadow( 0px 10px 5px rgba(0, 0, 0, .5));
  filter: drop-shadow( 0px 10px 5px rgba(0, 0, 0, .5));

}

这是项目其他部分的结果：https://i.stack.imgur.com/LXbzK.png

如您所见，左侧没有阴影。

我尝试添加另一个 svg 并稍微偏移并产生阴影效果，但我没有设法得到更好的东西。我还尝试环顾四周，只在 svg 的一侧添加边框并以某种方式添加一些阴影效果，但我似乎找不到合适的解决方案。

非常感谢

【问题讨论】：

我通过把它做成梯形解决了这个问题。路径改为“0,0 0,20 100,100 100,0”，这会在整个侧面留下阴影，从而损害更温和的角度。
如果是，请回答您的问题
@myckhel 我认为这不是正确的答案，因为它的角度更温和。 JHeth 有一种更适合我的方法。感谢您的意见。

标签： css tailwind-css

【解决方案1】：

您可以尝试的一件事是使用 SVG 过滤器来制作您自己的阴影，而不是使用 CSS，这样可以让您有更多的控制权。

<div class="relative h-32 bg-blue-500">
<svg class="w-full h-20 block fill-current text-white overflow-visible" viewBox="0 0 100 100" preserveAspectRatio="none">
  <defs>
    <filter id="shadow" x="0" y="0" width="100%" height="120%">
      <feOffset result="offOut" in="SourceAlpha" dx="0" dy="5" />
      <feGaussianBlur result="blurOut" in="offOut" stdDeviation="10" />
      <feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
    </filter>
  </defs>
  <polygon points="-20,-20 100,0 120,120" filter="url(#shadow)"/>
</svg>

在这种方法中，您还需要使包裹在 SVG 周围的 div 比 SVG 本身高，以便为阴影留出空间，并将多边形的点扩展到 SVG 视图框的宽度之外，以防止阴影得到 '边缘更薄'不那么明显，最后但并非最不重要的是使 SVG overflow-visible。这是 Tailwind Play 演示 https://play.tailwindcss.com/PIjX1eV0lz

【讨论】：

我在测试SVG滤镜的时候从来没有想过用overflow-visible来解决这个问题，这才是关键，非常感谢。