画像は一切つかわずにcss3で鏡餅を描く②

御幣（ごへい）※紙垂（しで）

前回、四方紅まで解説してみたので今回は御幣・紙垂からはじめます。
※御幣・紙垂とは紅白が交互になっているひらひらした紙の事

御幣・紙垂を作る上で、のポイントはこれだ！

• 『:before』『:after』の使いどころ
• 角度を傾ける記述、transform:rotate3d(1,0,1,-45deg);
• 位置をずらす記述、transform:translate(-10px,0);
• 要素を反転させる記述、transform:scale(-1, 1);

これらを踏まえた上で下記のサンプルを見てみましょう。

.kgmmc {
	width:100%;
	height:500px;
	position:relative;
}
.shide {
	margin-left:-150px;
	width:300px;
	position:absolute;
	left:50%;
	top:194px;
	z-index:9;
}
.shide + .shide {
	-moz-transform:scale(-1, 1);
	-webkit-transform:scale(-1, 1);
	transform:scale(-1, 1);
}
.shide div,
.shide:before,
.shide:after {
	border:1px solid #333;
	width:40px;
	height:40px;
}
.shide:before,
.shide:after {
	display:block;
	content:'';
	background-color:#DF3838;
}
.shide:before {
	-moz-transform:rotate3d(1,0,1,-45deg);
	-webkit-transform:rotate3d(1,0,1,-45deg);
	transform:rotate3d(1,0,1,-45deg);
}
.shide div {
	-moz-transform:rotate3d(1,0,1,-45deg) translate(-10px,0);
	-webkit-transform:rotate3d(1,0,1,-45deg) translate(-10px,0);
	transform:rotate3d(1,0,1,-45deg) translate(-10px,0);
	background-color:#FFF;
}
.shide:after {
	-moz-transform:rotate3d(1,0,1,-45deg) translate(-20px,0);
	-webkit-transform:rotate3d(1,0,1,-45deg) translate(-20px,0);
	transform:rotate3d(1,0,1,-45deg) translate(-20px,0);
}

transform:scale(-1, 1);の様にX方向にマイナスを指定することで簡単に要素を反転させられるところが個人的に一番おすすめです。

三宝

最後は三宝（土台）についてですが、これは今まで使った事のある記述で簡単に作ることができます。

.sanpou {
	margin-left:-110px;
	border:1px solid #333;
	width:220px;
	height:160px;
	background-color:#C08F00;
	-moz-box-shadow:inset -4px -5px 10px rgba(0,0,0,0.65);
	-webkit-box-shadow:inset -4px -5px 10px rgba(0,0,0,0.65);
	box-shadow:inset -4px -5px 10px rgba(0,0,0,0.65);
	position:absolute;
	left:50%;
	top:240px;
}
.sanpou:before {
	margin-left:-155px;
	border:1px solid #333;
	display:block;
	content:'';
	width:310px;
	height:60px;
	background-color:#C08F00;
	-moz-box-shadow:inset -4px -5px 10px rgba(0,0,0,0.65);
	-webkit-box-shadow:inset -4px -5px 10px rgba(0,0,0,0.65);
	box-shadow:inset -4px -5px 10px rgba(0,0,0,0.65);
	position:absolute;
	left:50%;
	top:-50px;
	z-index:9;
}
.sanpou:after {
	margin:40px auto 0;
	border-radius:40px;
	content:'';
	display:block;
	width:80px;
	height:80px;
	background-color:#444;
	-moz-box-shadow:inset 4px 5px 10px rgba(0,0,0,0.65);
	-webkit-box-shadow:inset 4px 5px 10px rgba(0,0,0,0.65);
	box-shadow:inset 4px 5px 10px rgba(0,0,0,0.65);
}

と、かなり割愛した部分もあるのに3月になってしまいましたが、これにてCSSで鏡餅を描く方法の解説を終わりとさせていただきます。

色んなものを組み合わせると、いろんなものが作れるのでCSSで面白いものが作れた場合は、ぜひフッターにあるリンクのお問い合わせフォームよりご連絡ください。