<table><th><td>에 대각선 사선 순수 CSS만 이용해서 넣기

 

 

디자인을 하다보면 생각치도 못한 사항을 요청하는 고객사들을 종종 만날 수 있다. 이번에는 HTML 표<table>의 테이블에 사선을 그어줄 수 있냐는 요청을 받았다. 그래서 찾아봤다. 역시나 HTML이나 CSS에서 직접적으로 제공해 주는 부분은 없고 편법을 이용해야하는데, 아래와 같은 3가지 방법을 찾아볼 수 있었다.

1) SVG를 활용하여 백그라운드에 그리는 방법
2) border값을 이용하는 방법
3) background-image의 linear-gradient를 사용하는 방법

1)과 2)번으로도 테스트를 해본 결과 사선을 매우 잘 나타낼 수 있었다. 그중 백그라운드를 활용한 방법은 테이블의 칸 사이즈 조절에 상관없이 대응이 가능하다. 그러나 나는 어떠한 소스도 필요 없이 순수 CSS만을 사용할 수 있는 장점을 지닌 3)을 이용해보려고한다.

 

 

1. <th>,<td>에 CSS로 대각선  

See the Pen Untitled by kihyun (@hidesigner2) on CodePen.

백그라운드 그라디언트로 이런 효과를 낼 수 있다는게 놀랍다! 정말 사람들의 잔머리는 최고다. 반대로 사선을 그리고 싶은 경우엔 background의 방향을 to right bottom 에서 to left bottom 으로 변경해주면 된다.

 

 

이 방법의 단점은, 

선이 약간 굵고 선명하지 않다는 점이다.

 

 

지원사양

백그라운드 이미지의 그라디언트를 이용하는 방법이기 때문에 지원사양도 괜찮은 편이다. 크롬 엣지 사파리 파이어폭스 오페라 그리고 ie 까지.

출처 : caniuse.com