如何在表格的 td 内创建一条弯曲的线？ [复制]答案

【问题标题】：How to create a crooked line inside td of a table? [duplicate]如何在表格的 td 内创建一条弯曲的线？ [复制]
【发布时间】：2018-02-12 09:08:47
【问题描述】：

我有一个表，我想用一条弯曲的线分隔 td 标记中的数据像这样：

我如何用 css 做到这一点？

表格中的数据是动态填充的，所以td的宽度不是固定的，它取决于其中数据的长度。

【问题讨论】：

仅供参考，您只需将重复问题的答案更改为 to top right 至 to top left。
好像已经在 SO 中询问过了，请参考下面的链接stackoverflow.com/questions/28425574/…
@rory-mccrossan 谢谢，我不知道如何搜索该问题

标签： jquery html css html-table css-tables

【解决方案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>

【讨论】：