[How to draw diagonal line in html table] #css

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>