如何对角分割表格标题单元格？

Question

我正在试图创建一个表格，其中的标题被2分成了一条对角线，如下图所示。

我怎样才能做到这一点？

谢谢:)

Answer 1

.background { 
 
    width: 100px; 
 
    height: 50px; 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 

 
.line { 
 
    width: 112px; 
 
    height: 47px; 
 
    border-bottom: 1px solid red; 
 
    transform: translateY(-20px) translateX(5px) rotate(27deg); 
 
    position: absolute; 
 
    z-index: -1; 
 
} 
 

 
.background>div { 
 
    position: relative; 
 
    height: 100%; 
 
    width: 100%; 
 
    top: 0; 
 
    left: 0; 
 
} 
 

 
.bottom { 
 
    position: absolute; 
 
    bottom: 1px; 
 
    left: 1px; 
 
} 
 

 
.top { 
 
    position: absolute; 
 
    top: 1px; 
 
    right: 1px; 
 
}

<table> 
 
    <th class="background"> 
 
    <div><span class="bottom">First</span> 
 
     <span class="top">Second</span> 
 
     <div class="line"></div> 
 
    </div> 
 
    </th> 
 
</table>