<table class="table-test">
  <tr>
    <td id="td0">
      <p>test0</p>
    </td>
    <td id="td1">
      <div class="layer"><b>Testing the div</b><br>char went out of div, nopwhjbmn hkg hj gjh with ABS p is correct</div>
    </td>
    <td id="td2">
      <p>test2 does not put div correctly etest2 does not put div correctltest2 does not put div correctly etest2 does not put div</p>
    </td>
  </tr>
</table>

<div class="diag">
  <p>Lorem ispum dolor sit amet Lorem ispum dolor sit amet Lorem ispum dolor sit amet Lorem ispum dolor sit amet Lorem ispum dolor sit amet Lorem ispum dolor sit amet Lorem ispum dolor sit amet Lorem ispum dolor sit amet Lorem ispum dolor sit amet Lorem ispum dolor sit amet Lorem ispum dolor sit amet </p>
</div>
.table-test {
  width: 100%;
  border-spacing: 4px;
  border-collapse: separate;
  margin: auto;
  table-layout: fixed;
}
.table-test td {
  background-color: lightgreen;
  text-align: center;
  border-radius: 20px;
  font-size: 1.5em;
  border: 1px solid black;
  padding: 10px;
  vertical-align: middle;
}
.table-test p {
  margin: 1rem 0;
}
#td1 {
  width: 30%;
  position: relative;
}
#td1:before {
  content: "KP";
  background: linear-gradient(
    to bottom right,
    rgba(0, 0, 255, 100) 50%,
    transparent 50%
  );
  padding: 0 10px;
  position: absolute;
  top: 0;
  left: 0;
  right: 50%;
  bottom: 20%;
  border-radius: 20px 0 0 0;
  color: yellow;
  font-size: 2em;
  text-align: left;
  z-index: 0;
  max-height: 150px; /* just to stop it going too big or small*/
  min-width: 100px; /* just to stop it going too big or small*/
}
.layer {
  position: relative;
  z-index: 2;
  padding: 10p;
}
#td2 {
  width: 20%;
}

/* old diagonal example below*/
.diag {
  display: block;
  width: 40%;
  padding: 10px;
  border: 1px solid;
  margin: 10px;
  background: linear-gradient(to bottom right, red 50%, transparent 50.5%)
    no-repeat 0px 0px;
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.