javascript - 如何使用 javascript 在两个 html 表格的中间添加阴影曲线？

Question

我创建了一个比较两个 html 表的行元素的函数。比较功能是成功的，但是我需要通过在表格中间添加阴影曲线来指出发生变化的位置，并且它需要是动态的。

Web 应用程序可以吗？目前我在中间使用html表格，但我不知道如何添加曲线。

这是我所做的截图:

这就是我想要实现的——中间的阴影曲线:

Answer 1

您可以创建一个 SVG 矢量绘图并将其设置为 CSS background-image: url(...); HTML 元素的 CSS background-size: 100% 属性100%；

.curve-left-right-top {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100' preserveAspectRatio='none'><g><path d='m0,0l100,0c-50,0 -50,100 -100,100' stroke-width='1.5' stroke='black' fill='gray' /></g></svg>");
  background-size: 100% 100%;
}

.curve-left-right-bottom {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100' preserveAspectRatio='none'><g><path d='m0,100l100,0c-50,0 -50,-100 -100,-100' stroke-width='1.5' stroke='black' fill='gray' /></g></svg>");
  background-size: 100% 100%;
}

.curve-right-left-top {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100' preserveAspectRatio='none'><g><path d='m100,100l-100,0c50,0 50,-100 100,-100' stroke-width='1.5' stroke='black' fill='gray' /></g></svg>");
  background-size: 100% 100%;
}

.curve-right-left-bottom {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100' preserveAspectRatio='none'><g><path d='m100,0l-100,0c50,0 50,100 100,100' stroke-width='1.5' stroke='black' fill='gray' /></g></svg>");
  background-size: 100% 100%;
}

<table>
  <tr>
    <td>A</td>
    <td class="curve-right-left-top" style="width: 30px"></td>
    <td>B</td>
  </tr>
  <tr>
    <td>A</td>
    <td class="curve-right-left-bottom" style="width: 30px"></td>
    <td>B</td>
  </tr>
  <tr>
    <td>A</td>
    <td class="curve-left-right-top" style="width: 30px"></td>
    <td>B</td>
  </tr>
  <tr>
    <td>A</td>
    <td class="curve-left-right-bottom" style="width: 30px"></td>
    <td>B</td>
  </tr>
</table>

除了使用 4 个镜像 SVG，您当然也可以通过 transform: scaleX(-1); 等将 CSS 转换仅应用于一个 SVG。