CSS3로 다양한 모양의 div 만들기 – 사각형부터 삼각형까지

CSS3를 활용하면 사각형, 삼각형 등 다양한 도형을 손쉽게 만들 수 있습니다. 이미지 파일 없이 순수 CSS만으로 div 요소의 모양을 자유롭게 변형할 수 있다는 점이 큰 장점입니다. 아래에서 대표적인 두 가지 도형 만드는 방법을 살펴보겠습니다.

1. 사각형(Rectangle) 만들기

가장 기본적인 사각형은 width와 height 속성만으로 간단히 구현할 수 있습니다.

#shape1 {
    width: 300px;
    height: 150px;
    background: blue;
}

위 코드는 가로 300px, 세로 150px 크기의 파란색 사각형을 생성합니다. 실제 웹 페이지에서 버튼, 배너, 카드 레이아웃 등 다양한 UI 요소의 기반이 되는 형태입니다.

2. 삼각형(Triangle) 만들기

삼각형은 border 속성을 활용하는 대표적인 CSS 트릭으로 구현합니다. 핵심은 요소의 너비와 높이를 0으로 설정하고, 한쪽 방향의 테두리에만 색상을 지정한 뒤 나머지는 투명(transparent) 처리하는 것입니다.

#shape2 {
    width: 0;
    height: 0;
    border-left: 200px solid transparent;
    border-bottom: 200px solid blue;
}

border-left는 투명하게 처리되고, border-bottom에 파란색이 적용되면서 위쪽을 향하는 삼각형이 완성됩니다. 색상을 지정하는 테두리 방향을 변경하면 삼각형이 향하는 방향도 자유롭게 조절할 수 있습니다. 예를 들어 border-top에 색상을 주면 아래쪽을 향하는 삼각형이 만들어집니다.

이처럼 CSS3의 박스 모델과 테두리 속성만 이해하면 별도의 그래픽 도구 없이도 다양한 불규칙한 도형을 div로 표현할 수 있습니다.