このツールはブラウザで即時実行できます。登録もサーバー処理も不要です。
このツールが役に立ちましたか？
byteflow.tools をインストールすると、起動が速くなり、オフラインでもツールを使えます。
インストールガイドこのツールが役に立ちましたか？
byteflow.tools をインストールすると、起動が速くなり、オフラインでもツールを使えます。
インストールガイドツールチップ、ポインター、UI 矢印向けの方向付き CSS 三角形を生成します。
ツールヒント、ポインタ、バッジ、ナビゲーション用の方向性のある CSS 三角形を生成します
透明な境界線と方向性のある色の境界線を使用して三角形 CSS を出力します。
幅と高さのコントロールで「上」、「下」、「左」、「右」の方向をサポートします。
ライブ プレビューを提供するため、矢印の方向とスケールを確認できます。
ドロップダウン、コールアウト、およびポインタ UI コンポーネントの再利用可能なスニペットをエクスポートします。
Direction
right
Geometry
基本幅 70px、高さ 40px
Color
#38bdf8
直角三角形 CSS
border-top: 35 ピクセルのソリッド透明。 border-bottom: 35 ピクセルの透明な実線。 border-left: 40 ピクセルのソリッド #38bdf8;
上三角 CSS
border-left: 30 ピクセルのソリッド透明;境界線右: 30 ピクセルの透明な実線。 border-bottom: 34px ソリッド #22d3ee;
統合に関するメモ
疑似要素を使用して、既存の UI ブロックに三角形を接続します。
三角形が歪んで表示されます
意図した比率になるようにベースの幅と高さの値のバランスをとります。
方向が間違った方向を指しています
スニペットをコピーする前に、選択した方向を確認してください。
カラーエッジにアンチエイリアスアーティファクトが表示されます
均等なピクセル値を試し、ターゲットズームレベルで検査してください。
ツールチップの周囲の位置がオフになっています
生成された形状を明示的な絶対配置ルールと結合します。
コンテナ内の予期しないレイアウトのシフト
生成された三角形要素の幅/高さをゼロに保ちます。
CSS 三角形ジェネレーター は、提出・公開・引き継ぎの前に行う迅速な検証ステップとして運用するのが適切です。
三角形 CSS で幅と高さがゼロに設定されるのはなぜですか?
境界線ベースの三角形は次のものに依存します。サイズ 0 のボックスと境界ジオメトリ。
これをツールチップの矢印に使用できますか?
はい、これは生成された三角形の一般的な使用例です。
三角形の方向を変更するにはどうすればよいですか?
方向を切り替え、境界線のルールを再生成します。
三角形の色をアニメーション化できますか?
はい、方向境界線の色のプロパティをアニメーション化します。
これは SVG 三角形を使用するより優れていますか?
単純なポインタの場合、境界線の三角形は軽量で高速です。