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

You could produce this slanted inner border effect using either one of the below methods but both needs the angles (skew/gradient) to be adjusted based on the height and width of your table cell.

Note: This might not be the best option (and I can't think of any other better options either) when the cell dimensions are dynamic/auto as the angles would need modification.

Option 1: Using Skew Transform on a pseudo-element

table,
tr,
td {
  border: 1px solid;
  border-collapse: collapse;
}
td {
  display: inline-block; /* doesn't seem to work in FF without this */
  position: relative;
  overflow: hidden;
  height: 100px;
  width: 200px;
  text-align: center;
  line-height: 100px; /* for vertical centering */
}
td:after {
  position:absolute;
  content: '';
  top: 0px;
  left: 0px;
  height: 100%;
  width: 100%;
  border: 1px solid red;
  -webkit-transform: skewX(63deg);
  -moz-transform: skewX(63deg);
  transform: skewX(63deg);
  -webkit-transform-origin: left bottom;
  -moz-transform-origin: left bottom;
  transform-origin: left bottom;
}

  

    

      Test
    
    

      Test
    
  
  

    

      Test
    
    

      Test
    
  
  

    

      Test
    
    

      Test
    
  

Option 2: Using Linear Gradients in Background (Not supported by IE9 and lower)

table,
tr,
td {
  border: 1px solid;
  border-collapse: collapse;
}
td {
  background: -webkit-linear-gradient(45deg, transparent 49%, black 49%, black 51%, transparent 51%);
  background: -moz-linear-gradient(45deg, transparent 49%, black 49%, black 51%, transparent 51%);
  background: linear-gradient(45deg, transparent 49%, black 49%, black 51%, transparent 51%);
  width: 50px;
  height: 50px;
}

  

    

      Test
    
    

      Test
    
  
  

    

      Test
    
    

      Test
    
  
  

    

      Test
    
    

      Test