블로그 쪼아~♬ 블로그 쪼아~ (◕ᴗ◕✿)

PC / HTML.CSS / GAME / BLOG

아끼고 겸손

• CSS

대각선 줄무늬 만들기 - CSS

NILGI 2026. 3. 14. 13:17

See the Pen 대각선 줄무늬 배경 by nilgi (@nilgi) on CodePen.

 

background-image: repeating-linear-gradient(-45deg, #5ce0e9 8px, #5ce0e9 16px, #ff8928 16px, #ff8928 24px);

 

deg

/* 대각선의 각도, 기울기 */

#5ce0e9 8px, #5ce0e9 16px

/* 색 시작과 끝 지점, 선 굵기 8px라는 뜻 */

#ff8928 16px, #ff8928 24px

/* 다음 색의 시작은 16부터 24까지인 굵기 8 */

 

색수는 계속 추가하면 된다.