CSS3で描く 基本図形2

2012.7.27、以下の修正・変更を行いました。
  • transformのskewの記述をskewXとskewYに変更
  • border-radius,box-shadowのベンダープレフィックスを削除

引き続きcssで基本図形を描く。今回は半円、扇型、平行四辺形、三角形の描き方。図形の描き方はいずれ一覧表の形でまとめようと考えている。

なお、前回と今回の図形は、すべて一つのdivで出来ているが、実際にはdiv以外の要素でもスタイリングできる。cssの初心者はサンプルの記述でdivが使われているのを見て、cssで見た目を指定できるのはdivだけだ、という勘違いをすることが多いので注意が必要だ(これがおそらく「div厨」の発生原因だと推察する)。

例えば、何かの申請用紙の姓名の記入例に「日本 一郎・東京 花子」とあっても、そのまま書き写す人はいない。サンプルをコピーする事は有効な学習手段だが、自分のマークアップで使っている要素にスタイルを設定して欲しい。

半円 half circle

class:square circle half

扇型 quarter circle

class:square circle quarter

border-radiusの値を4つ指定すると、左上、右上、右下、左下の順に設定できる。左上、右上を丸めれば半円に、角を1つだけ丸めれば扇型になる。

平行四辺形 parallelogram

class:square parallelogram

傾きはtransformプロパティのskewXで設定できる。変形の基点はtransform-originで設定。ここでは右下を基点に-25度skewXしている。

三角 triangle

class:square parallelogram triangle

平行四辺形のbackgroundをグラデーションで塗り、その半分の塗り色を透明にする方法。

なお、mozとwebkitとで違いの著しかったgradientの指定方法だったが、両者で統一方式が合意された模様。これを受けて、後方互換用の指定をしておいた。

三角2 triangle2

class:square triangle2

triangle2の::beforeでcontentした正方形を-45度回転。triangle2自体の幅を√2px * 100px、高さを√2 * 100px / 2にしてoverflowをhiddenにして隠している。

マウスをホバーすると、親要素につけたbox-shadowが元の矩形が見える。

台形 trapezoid

class:square trapezoid

::beforeでcontentした正方形を傾けて平行四辺形にし、その一部を隠すと台形の出来上がり。

台形2 trapezoid2

class:square trapezoid2

::beforeでcontentしたものを三角形1の手法で三角にして、その頭を1つ隠している。しかしtrapezoidなんて単語、初めて知ったなあ。

カテゴリー: css, css3 タグ: , パーマリンク

シェア

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA