Softonic

CSS 화살표 생성기

단계 1 / 2
다음

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

CSS 화살표 만들기

  1. 1

    방향 선택

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

  2. 2

    모양 설정

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

  3. 3

    CSS 복사

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

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

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

관련 도구

ASCII 표 참조

NUL, LF, DEL 같은 제어 문자를 포함해 모든 문자에 대한 10진수, 16진수, 8진수, 2진수, HTML 숫자 문자 참조를 담은 0부터 127까지의 전체 ASCII 표.

FPS 카운터

requestAnimationFrame으로 브라우저 FPS를 측정하세요. 스무딩, 최소/최대 프레임레이트, 경고 임계값, 선택형 그래프를 제공합니다. 업로드나 API 없이 로컬에서 실행됩니다.

HTML 문자 참조

HTML 엔티티의 검색 가능한 목록, 각 엔티티의 이름 및 숫자 코드, 그리고 특수 문자 및 기호에 대한 1클릭 복사 기능을 제공합니다.

색상 혼합기

두 HEX 색상을 2-20개의 균등한 색상 견본으로 섞습니다. 양 끝 색상을 포함해 각 중간 색상을 대문자 HEX 코드로 확인하세요.

ASCII 이진수 변환기

ASCII 문자열을 이진수 표현으로 변환하세요. 각 문자는 8비트가 되고 공백으로 구분되어 프로토콜 추적이나 과제에 바로 붙여넣기 좋습니다.

색상 틴트 생성기

기준 색의 밝은 틴트를 생성합니다. 디자인 시스템 토큰, 배경, 호버 상태를 위한 3-20단계 스케일.

이 도구는 다른 언어로도 제공됩니다