How to make custom table layout lines with CSS - html

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>