CSS로 X 버튼 그리기(feat.styled-components)

프로젝트에서 x버튼 디자인이 각각 다른 사이즈, 두께로 나와서 스타일 컴포넌트를 정의해 버튼 폭을 입력받아 만들도록 했다. 매번 비슷한 스타일 컴포넌트를 정의하지 않고 버튼의 크기와 선의 두께를 받아 그려주도록 만들었다.

코드

export const CloseBtn = styled.button<{ width: number; color: string; lineWidth?: number }>`
  position: relative; 
  width: ${({ width }) => width}px;
  height: ${({ width }) => width}px;
  &:before,
  &:after {
    top: -${({ width }) => width * 0.2 - 1}px;
    position: absolute;
    content: ' ';
    height: ${({ width }) => width * 1.414}px;
    width: ${({ lineWidth }) => lineWidth ?? 1}px;
    background-color: ${({ color }) => color }; 
  }
  &:before {
    transform: rotate(45deg);
  }
  &:after {
    transform: rotate(-45deg);
  }
`;

원리

세로로 서있는 직선 두개를 가상 요소 before, after에 만들고 각각 앞으로 뒤로 45도씩 transform으로 기울여 X 버튼을 만든다. 이때 X 버튼의 폭(=높이)을 기준으로 직선의 길이와 끌어올려주는 길이(기울어져 실제 위치보다 아래로 내려감)를 계산했다.

풀이

버튼의 폭이 x일 때 45도 기울일 직선의 길이는 x√2다. 직각 이등변 삼각형이기 때문이다. 직선의 길이는 width * 1.414(=√2)로 설정해준다.
원의 반지름의 길이는 이를 반 나눈 x√2/2다. 위로 끌어올릴 길이 a는 반지름(노랑)에서 x/2(보라)를 뺀만큼이다. 보라색 길이가 x/2인 이유는 반지름과의 관계가 직각 이등변 삼각형의 변과 빗변의 관계이기 때문이다. 반지름에서 √2만큼 나누면 보라색 길이가 나온다.
끌어올릴 길이, 반지름에서 보라를 빼면 우측 상단의 식을 거쳐 x*0.207이 나온다. 가상요소 직선의 top에서 이 길이만큼 빼주면 위로 올라간다. 그런데 화면에서 봤을 때 1픽셀정도 더 올라간것처럼 보여서 1픽셀정도 덜 올리니 예쁘게 맞았다. 선의 두께때문인지? 잘 모르겠다. 아는 분은 댓글로 부탁드립니다.