css삼각형 (1) 썸네일형 리스트형 [CSS] CSS로 삼각형 그리기 CSS에서 삼각형을 만들기 위해서는 사각형을 활용한다. 단계를 거쳐 살펴보자.위에 있는 이미지가 아래에 첨부되어있는 코드에 대한 결과 화면이다.1. 가로 100px, 세로 100px인 사각형이 있다. 각 테두리의 색상을 다르게 해놨는데, 각 모서리를 잘 보면 하나의 테두리의 범위가 대각선 모양으로 끝나는 것을 확인할 수 있다. 이 점을 이용해서 삼각형을 만드는 것이다.2. 우선 높이를 0으로 만들어서 사각형의 밑면만 남긴다. 그리고 아래쪽 테두리를 제외한 나머지 테두리의 색상을 투명색으로 지정한다. 그럼 1번에서 봤던 사각형의 4가지 테두리 중에 아래쪽 테두리만 남은 것을 확인할 수 있다. 역시 테두리의 양 끝은 대각선으로 잘려있는 모습니다.3. 이제 2번에서 가로 길이를 0으로 줄인다. 그러면 2번의 .. 이전 1 다음
