JSFiddle - React, Tailwind, and code Playground

by mark edwards

HTML

<html>
<head>

</head>
<body>

<div style='border: 2px dotted orange; background-color: none;'>
<br />
<br />



<table border='3px'>
<tr>
<td class='styleTableTdItem bottom' style='z-index: 0;'>
<span  id='diagLine'>
this is a longer diagonal  this is a longer diagonal 
</span>
</td>
<td class='styleTableTdItem'>
<span  style='z-index:100'>Next Value</span></td>
<td class='styleTableTdItem'>
<span  style='z-index:100'>Next Value</span></td>
</tr>
</table>
<p>
we should just see "this is a long" and omit "diagonal line"
</p>
</div>
</body>
</html>

CSS

/* copied from: https://9elements.com/blog/pure-css-diagonal-layouts/ */
span#diagLine {
  margin-left: 0px;
  margin-top: 10px;
  transform: rotate(345deg);
  transform-origin: left bottom;
  position: absolute;
  display:relative;
  text-decoration: none;
  color: blue;
  font-size: 13px;
  z-index: -10;
}

td.styleTableTdItem {
  width: 60px;
  height: 60px;
  z-index: 1; 
   
}

td:not(.bottom){
  background-color: gray;
}