トライアングルメーカー
CSSだけで三角形を作ります
- 「形状指定」のスライドバーで、キャンバスの横幅を決めます
- 四方のラジオボタンで、三角形の底辺の位置を決めます
- 縦横のスライドバーで、三角形の頂点の位置を調節します
- テキストエリアの下の、Base size・回転のスライドバーで、サイズ・回転を調節して完成です
形状指定：縦長長方形⇔正方形
| Base size | ||
| 回転 |
概要
いわゆる「CSSジェネレーター」の一種です。 borderの表示特性を利用して、HTMLとスタイルシートの記述のみで三角形を作成します。
div要素に、テキストエリアに出力されたスタイルを適用すれば、三角形を表示することができます。
補足
コメント
この機能は、東京IT新聞の2014/11/15号の株式会社モノサスさんが執筆する、 「Coding Methodology」という記事で紹介されたTipsをヒントに作成しました。
この記事で、CSSだけで簡単に三角形が表現できること初めて知り、カルチャーショックを受け作ってみたくなりました。
heightやwidthを1以上に指定することにより台形も作成できるのですが、このページでは三角形の作成に特化しました。
※東京IT新聞は運営会社の変更が何度もあり、2017年頃に完全終了したようです。
関連・参考リンク
ちょこっとアンケート＆メッセージ
このページに関するちょっとした感想または、要望、バグ・間違いの指摘などは、下記の送信欄からお送りください。 質問・その他お問合せなど、返信をご希望の方は「こちらのページ」からメッセージをお送りください。
「このページはお役に立ちましたか？」のアンケートと自由メッセージのどちらか一方でかまいません (両方だとよりうれしいです)。お気軽にご利用ください (感想・どんな用途で使用したかなどをいただけると作成・運営の励みになります！)。
このページはお役に立ちましたか？
自由メッセージ
認証コード 必須
画像のひらがな一文字を入力してください。拗音・促音・濁点・半濁点はありません。
※サンプルの追加・ツール改善の参考に利用させていただきます。