如何在表格的td内创建一条弯曲的线？

Question

我有一个表格，我希望将td标记中的数据与一条曲线分开，如下所示：

我怎样才能用css做到这一点？

表中的数据动态填充因此td的宽度不固定，它取决于其中的数据长度。

Answer 1

这是一个纯CSS示例，使用after和transform: rotate：

.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>