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>