[CSS] div에 대각선 그리기 (linear-gradient)

 

div에 대각선 그리기 (linear-gradient)

 

먼저, linear-gradient에 대한 자세한 설명은 지난 포스팅을 참고하세요.

2025.02.24 - [IT/CSS] - [CSS] linear-gradient 속성 예제, 배경색 그라데이션 효과

[CSS] linear-gradient 속성 예제, 배경색 그라데이션 효과

 

 

대각선 그리기 예제

<div class="diagonal-line"></div>

.diagonal-line {
  width: 300px;
  height: 300px;
  border: 1px solid black;
  background: linear-gradient(45deg, transparent 49%, black 50%, transparent 51%);
}

(1) 45deg: 각도

• 그라디언트의 방향을 설정합니다.
• 45deg: 왼쪽 위에서 오른쪽 아래로 대각선 방향입니다.
• 각도가 클수록 선이 더 가파르게 내려가며, 각도가 작을수록 완만하게 내려갑니다.
• 방향을 바꾸고 싶다면 각도를 바꿔보세요
  • 0deg: 가로 선
  • 90deg: 세로 선
  • 135deg: 왼쪽 아래에서 오른쪽 위로

 

(2) transparent 49%: 투명한 부분

• 49% 지점까지는 투명하게 설정합니다.
• transparent는 배경색이 보이도록 하는 투명한 색상입니다.
• 49%는 그라디언트의 시작점입니다.

 

(3) black 50%: 대각선 선

• 50% 지점에 검정색(black)을 설정합니다.
• 49%와 51% 사이, 2%의 짧은 간격에 얇은 검정색 선이 생깁니다.
• 이 부분이 대각선 선으로 나타납니다.

 

(4) transparent 51%: 투명한 부분

• 51%부터는 다시 투명하게 설정합니다.
• 이 부분부터 끝까지 배경색이 그대로 보입니다.

결과: 대각선 선의 모습
이 코드는 45도 대각선 방향으로 얇은 검정색 선을 그립니다.
선의 두께는 49%와 51% 사이의 차이인 2%로 결정됩니다.
만약 더 얇게 하고 싶다면, 예를 들어 transparent 49.5%와 transparent 50.5%로 설정하면 됩니다.

 

 

선 색상 변경

<div class="diagonal-line"></div>

.diagonal-line {
  width: 300px;
  height: 300px;
  border: 1px solid black;
  background: linear-gradient(45deg, transparent 49%, red 50%, transparent 51%);
}

검정색(black) 대신 빨간색(red)으로 대각선을 그립니다.

 

 

선 두께 변경

<div class="diagonal-line"></div>

.diagonal-line {
  width: 300px;
  height: 300px;
  border: 1px solid black;
  background: linear-gradient(45deg, transparent 48%, black 50%, transparent 52%);
}

48%와 52% 사이에 4%의 간격으로 두꺼운 선을 그립니다.

 

 

선 방향 변경

<div class="diagonal-line"></div>

.diagonal-line {
  width: 300px;
  height: 300px;
  border: 1px solid black;
  background: linear-gradient(135deg, transparent 49%, black 50%, transparent 51%);
}

135deg로 설정하면 대각선이 왼쪽 아래에서 오른쪽 위로 그려집니다.