Softonic

CSS 矢印ジェネレーター

ステップ 1 / 2
次へ

ブラウザ内でシンプルな CSS 矢印を作成します。右、左、上、下と、色、正方形のサイズ、枠線の太さを選び、生成された .arrow ルールをコピーします。

CSS 矢印を作る

  1. 1

    方向を選ぶ

    右、左、上、下から選択します。

  2. 2

    見た目を設定する

    色、サイズ、太さをピクセルで設定します。

  3. 3

    CSS をコピーする

    プレビューを確認してルールをコピーします。

このジェネレーターは、display: inline-block、同じ幅と高さ、右と下の枠線、四方向用の回転を持つ正方形の .arrow 要素を 1 つ作ります。

枠線三角形、clip-path、SVG、グラデーション、斜め矢印、ツールチップのしっぽは作りません。HTML、レイアウト検証、互換性の案内も提供しません。コピーしたルールは自分のページでテストしてください。

関連ツール

Webpack設定ジェネレーター

素の JavaScript、React、Vue 向けに webpack 5 の webpack.config.js を生成します。TypeScript、Babel、CSS や Sass、画像、HtmlWebpackPlugin、開発サーバー、npm install のコマンドまでそろいます。

CSSローディングアニメーション生成ツール

純粋なCSSで円形スピナーを作成できます。直径、枠の太さ、アクセントカラー、回転速度を設定し、ライブプレビューを確認して、そのまま使えるCSSをコピー。SVGもJavaScriptも不要です。

OpenAPI 検証ツール

OpenAPI または Swagger のドキュメントを JSON か YAML で貼り付けて、コア構造をチェックします: バージョンフィールド、info オブジェクト、paths を、わかりやすいエラーと警告つきで。

CMYK から RGB への変換

標準的な計算式で CMYK の割合をおおよその RGB 値と Hex 値に変換し、画面用にすばやく確認できます。

カラーティントジェネレーター

ベースカラーの明るい色合いを生成します。デザイン システム トークン、背景、ホバー状態を 3 ～ 20 段階でスケールします。

PHPフォーマッター

単純なPHPコードに改行と2または4スペースのインデントを追加します。結果は必ず確認してください。PHPパーサーでもPSR-12準拠ツールでもありません。

このツールは他の言語でも利用できます