[HTML/CSS] 대각선 그리기

html과 css를 배우면서, 참으로 기능이 많다고 생각했다.
그런데, 의외로 대각선 그리기가 없는 것이었다!

그래서 필자가 알아본 대각선 그리기 몇 가지를 공유한다.

1. border의 응용
border: 2px solid black 등과 같이 외곽선을 그릴수도 있지만, border-bottom, border-left등과 같이 각 면마다 따로 외곽선을 그릴 수 있다.

이를 적용해보면, 아래와 같다.

.diagonal1 {
  width: 100px;
  height: 100px;
  background-color: red;
  border-bottom: 10px solid gray;
  border-right: 10px solid yellow;
}

또잉!😮 대각선이 보인다.

그럼, 여기서 width, height를 0으로 설정한다면??

.diagonal2 {
  width: 0px;
  height: 0px;
  background-color: red;
  border-bottom: 40px solid gray;
  border-right: 40px solid yellow;
}

대각선이 그려졌다!!!
여기서 각 면의 색과, 크기를 조절함으로써 다양한 대각선을 얻을 수 있다.
아래를 보자.

.diagonal3 {
  width: 0px;
  height: 0px;
  border-bottom: 60px solid gray;
  border-right: 40px solid rgba(0,0,0,0);
}

이렇게 삼각형 형태의 대각선을 얻을 수가 있다.

2. rotate 사용하기
아니, 삼각형 말고 대각선!!!🤬 이라고 한다면, 의외로 간단하게 rotate를 사용하여 대각선을 얻을 수 있다.

.diagonal4 {
  width: 5px;
  height: 50px;
  background-color: peru;
  transform: rotate(-45deg);
}

단순히 직선을 그려주고, 45도 회전시킴으로써 대각선을 얻을 수 있다.

도형 안에 들어가는 대각선을 표현하려면, 위를 응용하여 아래와 같은 방식으로 그릴 수 있다. 여기서 overflow: hidden 속성을 사용했음에 유의하자.

.circle {
  height: 100px;
  width: 100px;
  background: black;
  border-radius: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.diagonal5 {
  width: 150px;
  height: 5px;
  background-color: yellow;
  transform: rotate(45deg);
} 

필자같은 화면 초보자들에게 많은 도움이 되길 바라며, 이만 포스팅을 마친다.
다음에는 background-image에 대해 다루어보기로 하겠다.