スマフォンサイトで使える CSS3で三角形作成応用編
2011.04.17
この記事は最終更新日から1年以上が経過しています。
前回の
CSSで図形 三角形＆台形
の応用で、二等辺三角形、ひし形を使い色々な図形を作成します。
まず、復習です。
HTML
1 | <div id="triangle"></div> |
CSS3
1 2 3 4 5 6 7 | #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をちょっとばらしてみましょう、
1 2 3 4 5 6 7 8 | #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;} |
ばらしてみるとこうなります。最初に書いた記述より多くなるが、描画される結果は一緒。
上向き三角形は
1 | border-bottom:#000 50px solid; |
と記述し、その他のborderを
1 | border-○○:50px solid transparent; |
とすればよい。
同様に上向き、右向き、左向きの三角形は、向けたい方向（逆のボーダー）に#000 50px solidを
設定すればそれぞれの三角形ができます。
正三角形じゃなく、二等辺三角形、ひし形に挑戦。
ただ、値を変化すれば二等辺三角形はできます。
1 2 3 4 5 6 7 8 | #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にしちゃえば
1 2 3 4 5 6 7 8 | #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;} |
こんな感じにできちゃいます。
ではひし形。
まず、左向きの二等辺三角形を作成。
1 2 3 4 5 6 7 8 | #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に設定。
1 | -webkit-box-reflect:right; |
この一行を加えるだけで、
あらま。ひし形の完成！
1 2 3 4 5 6 7 8 9 | #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;} |
数値を変えることで
変形も可能！！
これらを応用し、さまざまなアイコンが作成出来ちゃいます！
