このサイトは、只今WEB業界で活躍中のデザイナー、プログラマーの方々の情報を集めたweb統合情報サイトです。

前回の

CSSで図形 三角形＆台形

の応用で、二等辺三角形、ひし形を使い色々な図形を作成します。

まず、復習です。

HTML

<div id="triangle"></div>

CSS3

#triangle {
  height:0px;
  width:0px;
  border:50px solid #000;
  border-color:transparent;
  border-top-color:#000;
}

これで、

このような図形ができます。

border-top-colorを、border-bottom-color、border-left-color、border-right-color、に

それぞれ変更すると、

こうなる。

では、最初のcssをちょっとばらしてみましょう、

#triangle {
  height:0px;
  width:0px;
  border-top:#000 50px solid;
  border-left:50px solid transparent;
  border-right:50px solid transparent;
  border-bottom:50px solid transparent;
}

ばらしてみるとこうなります。最初に書いた記述より多くなるが、描画される結果は一緒。

上向き三角形は

border-bottom:#000 50px solid;

と記述し、その他のborderを

border-○○:50px solid transparent;

とすればよい。

同様に上向き、右向き、左向きの三角形は、向けたい方向（逆のボーダー）に#000 50px solidを

設定すればそれぞれの三角形ができます。

正三角形じゃなく、二等辺三角形、ひし形に挑戦。

ただ、値を変化すれば二等辺三角形はできます。

#triangle {
  height:0px;
  width:0px;
  border-top:0px solid transparent;
  border-left:20px solid transparent;
  border-right:20px solid transparent;
  border-bottom:#000 60px solid;
}

leftとrightの値を等しくすれば二等辺三角形の完成です。

直角三角形は左右の値を0にしちゃえば

#triangle {
  height:0px;
  width:0px;
  border-top:0px solid transparent;
  border-left:0px solid transparent;
  border-right:20px solid transparent;
  border-bottom:#000 40px solid;
}

こんな感じにできちゃいます。

ではひし形。

まず、左向きの二等辺三角形を作成。

#triangle {
  height:0px;
  width:0px;
  border-top:20px solid transparent;
  border-left:0px solid transparent;
  border-right:#000 40px solid;
  border-bottom:20px solid transparent;
}

こんな感じで表示される。

色々なやり方があるのですが、簡単なやり方は、

反射させるプロパティbox-reflectを使いましょう！

css3のbox-reflectプロパティは、図形や画像を反射させて表示することが可能です！

ここでは、値をrightに設定。

-webkit-box-reflect:right;

この一行を加えるだけで、

あらま。ひし形の完成！

#triangle {
  height:0px;
  width:0px;
  border-top:20px solid transparent;
  border-left:0px solid transparent;
  border-right:#000 40px solid;
  border-bottom:20px solid transparent;
  -webkit-box-reflect:right;
}

数値を変えることで

変形も可能！！

これらを応用し、さまざまなアイコンが作成出来ちゃいます！

デモ画面はこちらから