hoangitk/How to draw diagonal line in html table.md

## How to draw diagonal line in html table.md

      
    Raw
  

              How to draw diagonal line in html table.md
            
          
    How to draw diagonal line in html table


Credit: https://stackoverflow.com/questions/28425574/slanted-diagonal-line-in-html-or-css


1: use clip-path, this method is ok for different colors


.table-editor td.diagonal:after {
content: "";
position: absolute;
z-index: 0;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(255,255,255,.5);
background-size: cover;
clip-path: polygon(0% 0%, 0% 100%, 100% 100%); /tl-br/
/clip-path: polygon(100% 0%, 0% 0%, 0% 100%);/ /bl-tr/
}

- 2: use sgv,  just only diagonal line 👍
```css
svg {
position: absolute;
width: 100%;
height: 100%;
}
<svg viewBox="0 0 10 10" preserveAspectRatio="none">
 <line x1="0" y1="0" x2="10" y2="10" stroke="black" stroke-width="0.2" />
</svg>