<div id=yourdiv>
  <h4></h4>
  <table>
    <thead>
      <tr>
        <th><div><span>Shrt Hdr</span><div id=span-target></div></div></th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>smol<div id=target></div></td>
      </tr>
      <tr>
        <td>smol2</td>
      </tr>
    </tbody>
  </table>
</div>

$border-width: 15px;

#yourdiv {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  max-width: 50vw;
  margin-top: 50px;
  font-size: 60px;
}
h4{
  // make sure this is bigger than your largest
  // expected header name slanted at 45 degrees
  // i.e. sqrt(2) * length of text
  flex-basis: 50px;
}
table{
  border-collapse: collapse;
  margin-left: 30px;
}
th {
  white-space: nowrap;
  position: relative;

  > div {
    // place div at bottom left of the th parent
    position: absolute;
    animation-duration: 4s;
    animation-name: position-div;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-timing-function: linear;
    // Make sure short setting names still meet the corner of the parent otherwise you'll get a gap
    text-align: left;
    // Move the top left corner of the span bottom-border to line up with the top left corner of the td border-right border so that the border corners are matched
    // Rotate -45 degrees about matched border corners
    // transform: 
    //   translate(calc(100% - #{$border-width} / 2), $border-width)
    //   rotate(315deg);
    transform-origin: 0% calc(100% - #{$border-width});
    width: 100%;

    > span {
      // make sure the bottom of the span is matched up with the bottom of the parent div
      position: absolute;
      bottom: 0;
      left: 0;
      border-bottom: $border-width solid rgba(0, 0, 255, 0.5);
    }
  }
}
td {
    border-right: $border-width solid gray;
    border-left: $border-width solid gray;
    // make sure this is at least as wide as sqrt(2) * height of your tallest letter or the headers will overlap each other
    min-width: 30px;
    text-align: right;
    padding-top: 2px;
    padding-left: 5px;
    position: relative;
}
#target {
  position: absolute;
  top: 0;
  right: -3px;
  width: 3px;
  height: 3px;
  background-color: red;
}
#span-target {
  position: absolute;
  bottom: calc( #{$border-width} - 3px );
  left: 0;
  width: 3px;
  height: 3px;
  background-color: black;
}
/*TADA! a response slanty border header table*/
@keyframes position-div {
  0% {
    bottom: 0;
    left: 0;
  }
  30% {
    bottom: 0;
    left: 0;
    transition-property: transform;
    transition-duration: 1s;
    transition-timing-function: ease-in-out;
    transform: translate(0, $border-width);
  }
  60% {
    bottom: -$border-width;
    left: 0;
    transition-property: transform;
    transition-duration: 2s;
    transition-timing-function: ease-in-out;
    transform: translate(calc(100% - #{$border-width} / 2), 0);
  }
  100% {
    bottom: -$border-width;
    left: calc(100% - #{$border-width}/2);
    transition-property: transform;
    transition-duration: 4s;
    transition-timing-function: ease-in-out;
    transform: rotate(315deg);
  }
}