CSS 화살표 생성기

단계 1 / 2

방향

색상

크기

두께

다음

브라우저에서 간단한 CSS 화살표를 만드세요. 오른쪽, 왼쪽, 위, 아래와 색상, 정사각형 크기, 테두리 두께를 선택한 뒤 생성된 .arrow 규칙을 복사합니다.

CSS 화살표 만들기

1

방향 선택

오른쪽, 왼쪽, 위 또는 아래를 선택합니다.
2

모양 설정

색상, 크기, 두께를 픽셀로 정합니다.
3

CSS 복사

미리보기를 확인하고 규칙을 복사합니다.

생성기는 display: inline-block, 같은 너비와 높이, 오른쪽과 아래쪽 테두리, 네 방향용 회전을 갖는 정사각형 .arrow 요소 하나를 만듭니다.

테두리 삼각형, clip-path, SVG, 그라데이션, 대각선 화살표 또는 툴팁 꼬리는 만들지 않습니다. HTML, 레이아웃 검증, 호환성 안내도 제공하지 않습니다. 복사한 규칙은 자신의 페이지에서 테스트하세요.

관련 도구