トライアングルメーカー

CSSだけで三角形を作ります

  1. 「形状指定」のスライドバーで、キャンバスの横幅を決めます
  2. 四方のラジオボタンで、三角形の底辺の位置を決めます
  3. 縦横のスライドバーで、三角形の頂点の位置を調節します
  4. テキストエリアの下の、Base size・回転のスライドバーで、サイズ・回転を調節して完成です
sample

形状指定:縦長長方形⇔正方形



Base size 
回転

概要

いわゆる「CSSジェネレーター」の一種です。 borderの表示特性を利用して、HTMLとスタイルシートの記述のみで三角形を作成します。

div要素に、テキストエリアに出力されたスタイルを適用すれば、三角形を表示することができます。

補足

コメント

この機能は、東京IT新聞の2014/11/15号の株式会社モノサスさんが執筆する、 「Coding Methodology」という記事で紹介されたTipsをヒントに作成しました。

この記事で、CSSだけで簡単に三角形が表現できること初めて知り、カルチャーショックを受け作ってみたくなりました。

heightやwidthを1以上に指定することにより台形も作成できるのですが、このページでは三角形の作成に特化しました。

※東京IT新聞は運営会社の変更が何度もあり、2017年頃に完全終了したようです。

関連・参考リンク

ちょこっとアンケート&メッセージ

このページに関するちょっとした感想または、要望、バグ・間違いの指摘などは、下記の送信欄からお送りください。 質問・その他お問合せなど、返信をご希望の方は「こちらのページ」からメッセージをお送りください。

「このページはお役に立ちましたか?」のアンケートと自由メッセージのどちらか一方でかまいません (両方だとよりうれしいです)。お気軽にご利用ください (感想・どんな用途で使用したかなどをいただけると作成・運営の励みになります!)


このページはお役に立ちましたか?
自由メッセージ
認証コード 必須
画像のひらがな一文字を入力してください。拗音・促音・濁点・半濁点はありません。
※サンプルの追加・ツール改善の参考に利用させていただきます。