†でおきしブログ†

ウナギ食べたいヽ(•̀ω•́ )ゝ✧

cssの三角形描画のカラクリをグラフィカルにしてみた

cssの三角形を描画する仕組みとは?

前書いたエントリー(【CSS3】図形描画とz-indexでselectを装飾 - †でおきしブログ†)で使用されている三角形描画についてですが、width,heightが0のelement(div)に対して、border-top(又はborder-bottom),border-left,border-rightを利用して三角形の描画を実現しています。

☆ピンとこない…

下向きの三角を例として、判り易く以下のようにするとグラフィカルに分かり易いんじゃないかなと

  • width,heightの値を0~100のスライダで可変にしてみる
  • border-left,border-rightに青色指定をする(通常はtransparentで透明にする)
  • border-topは色指定無し(黒)

☆で、こんな感じになりました

スライダを動かしてみると、borderの青と黒の部分がどのように変化するかわかると思います。
width,heightの値が0ってのがポイントなんだなぁと直感できそうですよね?
そうでもないかな?(^^;


ではでは