テーブルの中に曲がった線を作成するには？

Question

は、私は私はこのような曲がったラインで、TDタグ内のデータを分離するテーブルを持っている：

どのように私はCSSでそれを行うことができますか？

動的にテーブルのデータを埋めるため、tdの幅は固定されていないので、データの長さによって異なります。ここで

Answer 1

はafterとtransform: rotateを使用して、純粋なCSSの例です：

だけFYI

.diagonal{border:1px solid gray; 
 
    height:100px; 
 
    width:100px; 
 
    position:relative; 
 
} 
 

 
.diagonal:after{ 
 
    content:""; 
 
    position:absolute; 
 
    border-top:1px solid red; 
 
    width:150%; 
 
    left:100%; 
 
    transform: rotate(135deg); 
 
    transform-origin: 0% 0%; 
 
    top:0px; 
 
}

<table> 
 
    <tr> 
 
     <td class='diagonal'></td> 
 
    </tr> 
 
</table>