CSS 삼각형 생성기

고전적인 테두리 트릭을 사용하여 CSS 삼각형을 생성합니다. 방향, 크기, 색상을 설정한 후 스니펫을 복사하세요.

CSS Triangle Generator

Live

Direction

Size60px

Color

CSS output

width: 0;
height: 0;
border-left: 60px solid transparent;
border-right: 60px solid transparent;
border-bottom: 60px solid #e11d48;

Key capabilities

방향, 크기, 색상 등 테두리 트릭을 사용하여 CSS 삼각형을 생성합니다.
브라우저에서 실행됩니다.
무료로 사용 가능

사용 방법

삼각형 방향을 선택합니다.
크기와 채우기 색상을 설정합니다.
CSS를 복사하세요.

How this tool works

삼각형 방향을 선택합니다.
크기와 채우기 색상을 설정합니다.
CSS를 복사하세요.

Recommended settings

먼저 기본 옵션을 사용한 다음 필요한 경우 조정하세요.

Supported formats

Text / on-page input

File size and limits

매우 복잡한 다중 레이어 미리보기는 구형 휴대폰에서 느리게 느껴질 수 있습니다.

Privacy

색상 및 CSS 생성기는 브라우저에서 완전히 실행됩니다. 미리보기 및 변환에서는 스타일을 업로드하지 않습니다.

Common use cases

필요할 때마다 CSS 삼각형 생성기를 사용하세요. 방향, 크기, 색상 등 테두리 트릭을 사용하여 CSS 삼각형을 생성하세요.

Troubleshooting

붙여넣은 후 미리보기가 다르게 보입니다.

페이지에 경쟁 CSS가 있는지 확인하세요(재설정, 상속된 색상). 먼저 생성된 규칙을 격리된 스타일시트에 복사합니다.

FAQ

내 CSS가 업로드되나요?

아니요. 생성기와 변환기는 실시간 미리보기를 통해 브라우저에서 실행됩니다.

계정이 필요합니까?

아니요. 도구를 열고 컨트롤을 조정한 후 CSS를 복사하세요.