javascriptを使用して2つのhtmlテーブルの真ん中に陰影曲線を追加するには？

Question

2つのhtmlテーブルの行項目を比較する関数を作成しました。比較関数は成功しましたが、テーブルの途中に影付きの曲線を追加して変更がどこに発生するのかを指摘する必要があり、動的である必要があります。

ウェブアプリケーションで可能ですか？現在、私は途中でhtmlテーブルを使用していますが、カーブラインを追加する方法はわかりません。

Answer 1

あなたが作成することができます。真ん中の斜線曲線を -

これは私が達成したいものです。ここで

は、私が何をしたかのスクリーンショットですSVGベクトルの描画を行い、CSS background-size: 100% 100%;

を持つHTML要素のCSS background-image: url(...);プロパティとして設定します210

.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を使用しては