今回の仕上がり
吹き出しの先や下方向の案内に使う三角形を、CSSのborderで作れるツールです。今回は下向きのまま幅80px・高さ40px、色を#1d4ed8に設定し、Element欄のCSSを保存しました。
CSS・自作HTML・MIT全文のZIPを保存 · 作例を単独で開く · 確認した出力CSS
作例は編集部が作った案内画面です。Omatsuri本体の複製ではありません。三角形の表示寸法は80×40pxでした。
幅・高さ・色を指定する
- 公式トップから「Triangle generator」を開きます。
- 「Width, px」を80、「Height, px」を40へ変更します。
- 「Color」の入力欄へ1d4ed8を入れます。欄の手前に#が付いています。
- .cssが選ばれた状態で「Element」のコードを確認します。下向きの場合はborder-widthが40px 40px 0 40pxです。
- このCSSをtriangle.cssとして保存し、同じフォルダのHTMLから読み込みます。ZIPでは保存済みの状態を試せます。
今回は表示された出力をファイルへ保存し、ブラウザで再表示しました。撮影時の公式プレビューは紫色のままで、入力・出力CSSの色と一致していません。出力を使った自作例で青色と80×40pxの寸法を確かめました。公式プレビューが一致しない原因は未確認です。
「Copy to clipboard」のクリップボード内容や、.scss・.jssの出力は未確認です。Pseudo-element欄のコードも今回の作例には使っていません。
使いどころと利用条件
画像ファイルを用意せず、小さな装飾をCSSで置きたいときに向きます。出力のwidthとheightは0ですが、borderを含む表示範囲は別です。三角形を押す操作に使うなら、図形だけに任せず、文字付きのbuttonなど操作の意味を持つ要素を別に用意します。
作者の公式リポジトリとMIT全文を確認しました。著作権表記は2020 Vitaly Rtishchevです。ソフトウェアのコピーや相当部分には著作権・許諾文を残す条件があります。今回のZIPにも全文を同梱しました。自作のHTML・レイアウトはCC0です。
2026年10月21日、登録・購入なしで公式UIの設定と出力をPCで確認。作例はPC・375px幅と明暗で検証しました。スマホ実機でのツール操作や、ほかの収録ツールは未確認です。Xの最近の作者投稿・反響は取得できず、人気や流行は断定していません。角の形を変える道具はFancy Border Radiusで紹介しています。