CSS3で描く基本図形2

投稿日: 2011/02/19 作成者: ksk

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

.half {
	height:50px;
	border-radius:50px 50px 0 0;
}

扇型 quarter circle

class：square circle quarter

.quarter {
	border-radius:0 100px 0 0;
}

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

平行四辺形 parallelogram

class：square parallelogram

.parallelogram {
	-moz-transform-origin:0 100%;
	-webkit-transform-origin:0 100%;
	transform-origin:0 100%;
	-moz-transform:skewX(-25deg);
	-webkit-transform:skewX(-25deg);
	transform:skewX(-25deg);
}

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

三角 triangle

class：square parallelogram triangle

.triangle {
	background:-moz-linear-gradient(
		45deg,red,red 50%,
		transparent 50%,
		transparent 100%);
	background:-webkit-linear-gradient(
		45deg,red,red 50%,
		transparent 50%,
		transparent 100%);
	background:linear-gradient(
		45deg,
		red,
		red 50%,
		transparent 50%,
		transparent 100%);
}

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

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

三角2 triangle2

class：square triangle2

.triangle2 {
	overflow:hidden;
	background:transparent;
	width:142px;
	height:71px;
}
.triangle2::before {
	content:"";
	display:block;
	width:100px;
	height:100px;
	background:rgb(80,80,200);
	-moz-transform-origin:0 0;
	-webkit-transform-origin:0 0;
	transform-origin:0 0;
	-moz-transform:rotate(-45deg);
	-webkit-transform:rotate(-45deg);
	transform:rotate(-45deg);
}

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

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

台形 trapezoid

class：square trapezoid

.trapezoid {
	overflow:hidden;
	background:transparent;
}
.trapezoid::before {
	content:"";
	display:block;
	width:100px;
	height:100px;
	background:rgb(80,80,200);
	-moz-transform-origin:0 100%;
	-webkit-transform-origin:0 100%;
	transform-origin:0 100%;
	-moz-transform:skewX(-25deg);
	-webkit-transform:skewX(-25deg);
	transform:skewX(-25deg);
}

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

台形2 trapezoid2

class：square trapezoid2

.trapezoid2 {
	overflow:hidden;
	background:transparent;
}
.trapezoid2::before {
	content:"";
	display:block;
	width:100px;
	height:100px;
	-moz-transform-origin:0 100%;
	-webkit-transform-origin:0 100%;
	transform-origin:0 100%;
	-moz-transform:skewX(-25deg) translate(-10px,-20px);
	-webkit-transform:skewX(-25deg) translate(-10px,-20px);
	transform:skewX(-25deg) translate(-10px,-20px);
	background:-moz-linear-gradient(
		45deg,red,red 50%,
		transparent 50%,
		transparent 100%);
	background:-webkit-linear-gradient(
		45deg,red,red 50%,
		transparent 50%,
		transparent 100%);
	background:linear-gradient(
		45deg,
		red,
		red 50%,
		transparent 50%,
		transparent 100%);
}

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

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