CSS의 clip-path 속성을 활용하면 별도의 이미지 파일 없이 순수 CSS만으로 삼각형을 손쉽게 만들 수 있습니다. clip-path는 요소에서 보여줄 영역을 지정하고 나머지 부분을 잘라내는 방식으로 동작하기 때문에, 삼각형뿐 아니라 다양한 도형을 자유롭게 표현할 수 있습니다.
clip-path 기본 문법
CSS clip-path 속성의 기본적인 사용 문법은 다음과 같습니다.
Selector {
clip-path: /*값*/
}
예제 1: polygon() 함수로 삼각형 만들기
다음 예제는 clip-path의 polygon() 함수를 사용하여 삼각형을 만드는 방법을 보여줍니다. 세 개의 좌표점(위쪽 중앙, 오른쪽 하단, 왼쪽 하단)을 지정하여 요소를 삼각형 형태로 잘라냅니다.
<!DOCTYPE html>
<html>
<head>
<style>
div {
padding: 10%;
border-radius: 2%;
width: 10%;
box-shadow: inset 0 0 80px violet;
clip-path: polygon(50% 0, 100% 100%, 0% 100%);
}
</style>
</head>
<body>
<div></div>
</body>
</html>
위 코드를 실행하면 보라색 내부 그림자(box-shadow) 효과가 적용된 삼각형이 화면에 출력됩니다.
예제 2: border 속성을 활용한 삼각형
clip-path 외에도 border 속성의 특성을 이용하면 삼각형을 만들 수 있습니다. 요소의 크기를 최소화하고 서로 다른 색상의 굵은 테두리를 지정하면, 테두리가 만나는 경계에서 삼각형 모양이 자연스럽게 형성됩니다. 아래 예제에서는 흰색 테두리를 배경과 같은 색으로 처리하여 주황색과 파란색 삼각형만 눈에 보이도록 구현했습니다.
<!DOCTYPE html>
<html>
<head>
<style>
div {
display: flex;
margin: 10px 0 20px;
}
div > div {
height: 12px;
border-top: 40px ridge orange;
border-right: 20px solid white;
border-bottom: 60px ridge cornflowerblue;
border-left: 80px solid white;
}
</style>
</head>
<body>
<div>
<div></div>
</div>
</body>
</html>
위 코드를 실행하면 주황색과 파란색 테두리가 교차하면서 만들어진 삼각형 형태의 도형이 출력됩니다.
마무리
clip-path의 polygon() 함수는 좌표값만 조절하면 삼각형의 방향과 비율을 자유롭게 변경할 수 있어 활용도가 매우 높습니다. 최신 브라우저에서 clip-path를 폭넓게 지원하므로, 배너·말풍선·아이콘 등 다양한 UI 요소 제작에 적극적으로 활용해 보시기 바랍니다.