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

Question

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

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

以下是我所做的截图：

这就是我想要达到的目标 - 中间的阴影曲线：

Answer 1

您可以使用CSS background-image: url(...);创建SVG矢量绘图并将其设置为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>

您可以通过transform: scaleX(-1);等方式将CSS转换仅应用于一个SVG，而不是使用4个镜像SVG。