如何對角分割表格標題單元格？

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>