トライアングルメーカー

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

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



Base size 
回転

概要

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

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

補足

コメント

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

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

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

関連

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

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

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


このページはお役に立ちましたか?