How can a split diagonally a table header cell?

Question

I am trying to create a table which header is divided in 2 with a diagonal line like in the image below. This would be useful for "combination tables", for example.

How can I do this?

Thanks :)

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>