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

我有，我想在td标签数据与歪线像这个单独的表：如何在表格的td内创建一条弯曲的线条？

如何我可以用CSS做呢？

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

来源

2017-09-04 SaMira kf

仅供参考，所有你需要在重复的问题的答案改变为'顶部right'为'到左上角'。 –

好像已经在SO问过，请参考下面的链接 https://stackoverflow.com/questions/28425574/slanted-diagonal-line-in-html-or-css –

@ rory-mccrossan谢谢，我didn不知道如何搜索这个问题 –

这里是一个纯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>

来源

2017-09-04 07:03:31

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

回答

相关问题