Softonic

CSS 화살표 생성기

단계 1 / 2
다음

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

CSS 화살표 만들기

  1. 1

    방향 선택

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

  2. 2

    모양 설정

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

  3. 3

    CSS 복사

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

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

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

관련 도구

보색 찾기

어떤 입력에 대해서도 보색을 찾습니다. HSL 반대 색, 분할 보색 쌍, 그리고 접근성 있는 조합 제안을 반환합니다.

Webpack 설정 생성기

순수 JavaScript, React, Vue용 webpack 5 webpack.config.js를 만드세요. TypeScript, Babel, CSS 또는 Sass, 이미지, HtmlWebpackPlugin, 개발 서버, npm install 명령까지 함께 제공합니다.

색상 혼합기

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

PHP 포매터

간단한 PHP 코드에 줄바꿈과 2칸 또는 4칸 들여쓰기를 추가합니다. 결과를 반드시 검토하세요. PHP 파서나 PSR-12 적용 도구가 아닙니다.

OpenAPI 검증기

OpenAPI 또는 Swagger 문서를 JSON이나 YAML로 붙여넣고 핵심 구조를 점검하세요: 버전 필드, info 객체, paths를 명확한 오류와 경고와 함께 확인합니다.

CSS 로딩 애니메이션 생성기

순수 CSS로 원형 스피너를 만듭니다. 지름, 테두리 두께, 포인트 색상, 회전 속도를 설정하고 미리 보기를 확인한 뒤 바로 쓸 수 있는 CSS를 복사하세요. SVG도 자바스크립트도 필요 없습니다.

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