How to make custom table layout lines with CSS

Question

I am trying to build the following diagrams using CSS.

I have tried different methods, such as rotating borders, but everything I've tried does not lead to promising results.

What method can I use to build the following diagrams using CSS?

Answer 1

I'd say it would be easier for you to plot those diagrams using SVG (Scalar Vector Graphics). Here's an example of one of those diagrams I did for you to understand. You can put all of the SVG in a flexbox, CSS Grid, or table as you prefer.

<svg height="200" width="200">
  <polyline points="20,20,60,60,20,100,60,60,120,60,160,20,120,60,160,100" style="fill:none;stroke:black;stroke-width:3" />
  <text x="10" y="60" fill="gray">WBC</text>
  <text x="80" y="50" fill="gray">HGB</text>
  <text x="80" y="80" fill="gray">Hct</text>
  <text x="140" y="60" fill="gray">Plt</text>
</svg>

What do the numbers mean?

The polyline provides with the functionality of drawing polygons by making use of coordinates to move the cursor around with X and Y co-ordinates while connecting the previous and the next coordinate. The origin of a SVG diagram is by default at the top-left (x=0,y=0) of your container. For this diagram, we took the initial position to be (20,20) the first 2 coordinates in the polyline points attribute. And then we move to (60,60) which connects the point (20,20) to (60,60) making this:

 
 <svg height="200" width="200">
   <polyline points="20,20,60,60" style="fill:none;stroke:black;stroke-width:3" />
 </svg>

Similarly, we move to (20,100) and remember to trace back, we use (60,60) again as shown. Think of it as a pen point which can't be held up and needs to move around while being on the sheet. The only alternative is to trace back paths.

The style attribute style="fill:none;stroke:black;stroke-width:3" let's you set the properties of the line which you are connecting. And you can add text simply by using the text tag and mentioning the X and Y coordinates` as demonstrated.
Try to tweak it around :) Hope, it helps.

You can lookup and refer to more of this on here : https://www.w3schools.com/graphics/svg_intro.asp

Answer 2

Consider using HTML5 canvas to achieve this result.

Please see the following tutorial for a simple introduction: https://www.w3schools.com/html/html5_canvas.asp

The HTML5 canvas should allow you to display and manipulate both text and shapes, providing the tools needed to achieve the effect you're aiming for.

Answer 3

With pure CSS, you can create first-one using border and transform rotate on first and last elements and then rotate again span elements inside to return text to normal.

.el-1 {
  display: flex;
}

.el-1 > div:first-child,
.el-1 > div:last-child {
  width: 50px;
  height: 50px;
  text-align: center;
  line-height: 50px;
  transform: rotate(45deg);
}

.el-1 > div:first-child {
  border-top: 1px solid black;
  border-right: 1px solid black;
}

.el-1 > div:last-child {
  border-bottom: 1px solid black;
  border-left: 1px solid black;
}

.el-1 > div > span {
  transform: rotate(-45deg);
  display: block;
}

.inner {
  width: 70px;
  text-align: center;
  line-height: 25px;
  padding: 0 10px;
}

.inner > div:first-child {
  border-bottom: 1px solid black;
}

<div class="el-1">
  <div><span>A</span></div>
  <div class="inner">
    <div>B</div>
    <div>C</div>
  </div>
  <div><span>D</span></div>
</div>