CSS Triangle Generator

Generate pure CSS triangles for your UI components instantly.


                        

                    

                

            


        

    


    
    

        

            

                
                    
                
            

            
Pure CSS

            
No images or SVG required.
                These triangles are lightweight and scale perfectly on any display.

        

        

            

                
                    
                    
                
            

            
Versatile Shapes

            
Supports 8 different
                directions, including equilateral and right-angled triangles for any layout.

        

        

            

                
                    
                
            

            
Production Ready

            
Cross-browser compatible code
                that works in all modern browsers and even IE back to version 6.

        

    





        
        

            

                
CSS三角形作成ツール｜コピペで即戦力のBorderジェネレーター


WebサイトのUIデザインに欠かせない「三角形」を、CSSのborderプロパティを活用して自動生成するツールです。吹き出しの突起、アコーディオンメニューの矢印、リストのドット代わりなど、画像を使わずに軽量なコードだけで実装したいエンジニア・デザイナーに最適です。


💡 本ツールの特長


Web制作において、アイコンフォントや画像を用意するまでもない小さな三角形をCSSで描画するのは定番の手法です。本ツールを使うことで、以下のメリットが得られます。


    

  • パフォーマンス最適化: 画像（SVG/PNG）を使用しないため、HTTPリクエストを削減し、サイトの読み込み速度向上に貢献します。
    • 

  • 直感的なリアルタイム編集: 向き、サイズ、色をGUI上で調整。変化がその場でプレビューに反映されるため、微調整の手間を省けます。
    • 

  • 高い汎用性: border プロパティの特性を利用した、ブラウザ互換性の高い標準的な実装コードを出力します。
    • 



📘 使い方とカスタマイズのコツ


    

  • 方向を選択: 上下左右の基本4方向に加え、斜め方向（左上・右下など）の直角三角形もワンクリックで切り替え可能です。
    • 

  • サイズ調整: 幅（Width）と高さ（Height）をpx単位で自由に設定できます。正三角形から、鋭角な二等辺三角形まで思い通りに作成できます。
    • 

  • カラー指定: デザインガイドに合わせて、カラーピッカーまたは16進数（#HEX）で色を適用できます。
    • 

  • コードをコピー: プレビュー下部のコードをクリックしてコピーし、CSSファイルに貼り付けるだけで実装完了です。
    • 



🧐 よくある質問


Q. なぜ border プロパティで三角形が作れるのですか？
A. 要素自体の幅と高さを0に設定し、特定の辺にのみ色を付け、隣接する辺を透明（transparent）に指定することで、ボーダー同士の境界線が斜めになり、結果として三角形が浮かび上がる仕組みを利用しています。


Q. レスポンシブ設計でサイズを可変にできますか？
A. 生成されたコードの px 単位を em や rem に書き換えることで、親要素のフォントサイズに連動したスケーリングが可能です。


Q. 疑似要素（::before / ::after）でも使用できますか？
A. はい、むしろ疑似要素での利用が推奨されます。吹き出しを作る際は、content: ""; と display: block; を指定した疑似要素にこのコードを適用してください。


📚 豆知識：border手法 vs clip-path


CSSで三角形を作る方法は、本ツールで採用している border 手法のほかに、最近では clip-path プロパティを使う方法も普及してきました。


clip-path はより複雑な多角形も作れますが、古いブラウザ（IEなど）への配慮が必要なプロジェクトや、実装のシンプルさ、保守性の観点からは、今なおこの border 手法が最も信頼され、広く使われています。