トライアングルメーカー

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以上に指定することにより台形も作成できるのですが、このページでは三角形の作成に特化しました。

関連・参考リンク

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

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

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


このページはお役に立ちましたか? ※サンプルの追加・ツール改善の参考に利用させていただきます。 チェックを入れなければ値の送信はせず、メッセージのみの送信となります。