일단 예제
다음의 도형들은 모두 CSS”만” 사용해서 그렸습니다. 이미지나 <canvas> 또는 VML과 같은 기술도 사용하지 않았습니다.
기본
다들 아시다시피 CSS에는 경계선을 그릴 수 있는 border 속성이 있고, 상하좌우 4개의 방향에 대해 굵기, 색상, 타입을 각각 지정할 수 있습니다. 예를 들어, theBox라는 아이디를 가진 엘리먼트의 왼쪽에만 빨간색 1px 굵기의 실선을 보여주고 싶다면 다음과 같이 작성합니다.
#theBox { border-left:1px solid red; }기본적으로 CSS에서 다루는 영역은 사각형입니다. 그래서, 4개 변의 경계선은 다음과 같이 설정할 수 있습니다.
#theBox { border:1px solid red; }그런데, 각각의 경계선이 만나는 지점은 어떤 모양으로 그려질까요? 확인하기 위해서 각각의 경계선 색깔을 달리하고 좀 더 크게 작성해보면 다음과 같은 모양을 얻을 수 있습니다.
경계선이 만나는 지점을 확인하세요
<b style="border:40px solid;border-color:red blue green yellow;display:block">경계선이 만나는 지점을 확인하세요</b>
보다시피, 각각의 경계선이 만나는 지점은 사선 형태를 이루고 있습니다. 슬슬 무슨 일이 일어날 것 같죠? ^^ 그 다음에는 내부 컨텐트를 없애보겠습니다.
<b style="border:40px solid;border-color:red blue green yellow;height:0;width:0;margin:0;padding:0;display:block"></b>
이 상태에서 상단의 선을 없앱니다.
<b style="border:40px solid;border-color:red blue green yellow;height:0;width:0;margin:0;padding:0;display:block;border-top-style:none"></b>
자… 이 상태에서 삼각형을 만들기는 쉽습니다. 좌우 경계선의 색상을 투명으로 만들어버리면 됩니다. 상단의 경계선처럼 없애지 않는 이유는 지금처럼 너비를 0으로 설정한 상태에서 좌우 경계선마저 없애면 전체 엘리먼트의 크기가 0이 되어 아예 화면에서 보이지 않기 때문입니다. 말보다는 눈으로 확인하는게 쉬울 듯 하여, 좌우 경계선을 아예 없애보았습니다.
<b style="border:40px solid;border-color:red blue green yellow;height:0;width:0px;margin:0;padding:0;display:block;border-top-style:none;border-left-style:none;border-right-style:none"></b>
화면에는 안나오지만 분명 존재하고 있습니다. -_-;;;
0이던 너비를 40px 정도로 줘봤습니다.
<b style="border:40px solid;border-color:red blue green yellow;height:0;width:40px;margin:0;padding:0;display:block;border-top-style:none;border-left-style:none;border-right-style:none"></b>
경계선이 다시 보이는 것을 확인할 수 있습니다. 다시 삼각형을 만드는 부분으로 돌아가서 좌우 경계선의 색상을 투명으로 만들어보겠습니다.
<b style="border:40px solid;border-color:red transparent green transparent;height:0;width:0;margin:0;padding:0;display:block;border-top-style:none"></b>
드디어 CSS만으로 삼각형을 만들었습니다!
응용
삼각형에서 너비를 조금 주면 사다리꼴을 만들 수 있습니다. 백문이 불여일견! 일단 보시죠!
<b style="border:40px solid;border-color:red transparent green transparent;height:0;width:40px;margin:0;padding:0;display:block;border-top-style:none"></b>
그리고 상단을 남겨두고 하단을 없애면 반대 모양의 사다리꼴을 얻을 수 있습니다.
<b style="border:40px solid;border-color:red transparent green transparent;height:0;width:40px;margin:0;padding:0;display:block;border-bottom-style:none"></b>
이 두개를 합치면 육각형을 만들 수 있죠.
색깔을 같이 맞추면 다음과 같이 보일 것입니다.
참고링크
아래 링크로 가시면 더 많은 예제를 볼 수 있습니다.
