css 웹 사이트 배경 대각선으로 나누기

웹 사이트를 아래 그림처럼 대각선으로 나눌때 어떻게 해야할까

Linear-gradient 를 사용하면 된다.

linear-gradient

CSS linear-gradient() 함수는 두 개 이상의 색이 직선을 따라 점진적으로 변화하는 이미지를 생성합니다. 함수의 결과는 image의 특별한 종류인 gradient 자료형입니다.

developer.mozilla.org

Linear-gradient 의 첫번째 매개변수인 deg를 조절하면 몇도로 나눌지 정할 수 있다.

90으로 정하면 페이지를 반으로 나눈다.

110은 110도로 나눈다.

Code