Slanted diagonal line in html or css?

Question

I want to make a Table like this

is it possible to add a slanted diagonal bord

Answer 1

Another approach would be to use SVG as it can scale easily to the size of your container.

Example :

div {
  position: relative;
  display:inline-block;
  width: 100px;
  height: 50px;
  border: 1px solid #000;
}
.l{width:200px;}
.xl{width:300px;}
svg {
  position: absolute;
  width: 100%;
  height: 100%;
}