cssで鏡餅を描いてみる

お正月と言ったら？

お正月と言ったら、思い浮かぶものは何でしょう？
お雑煮？おせち？お年玉？などなど色々あると思います。

で、でも、ぼ、僕は、おっ、お餅が
だっ、だいすきなんだな（裸の大将風）

そんなお餅（鏡餅）をhtmlとcssだけで描いてみました。

ちょっと下の灰色のボタンを押して組み立ててくれたまえ！

htmlとcssはこんな感じでできてます。

.kgmmc {
	width:100%;
	height:500px;
	position:relative;
}
.happa {
	margin-left:-15px;
	border:1px solid #333;
	border-radius:20px 20px 20px 20px / 1px 20px 1px 20px;
	width:20px;
	height:10px;
	background-color:#47AC00;
	-moz-box-shadow:0px 3px 5px rgba(0,0,0,0.3), inset -4px -5px 5px rgba(0,0,0,0.65);
	-webkit-box-shadow:0px 3px 5px rgba(0,0,0,0.3), inset -4px -5px 5px rgba(0,0,0,0.65);
	box-shadow:0px 3px 5px rgba(0,0,0,0.3), inset -4px -5px 5px rgba(0,0,0,0.65);
	position:absolute;
	left:50%;
	top:5px;
	z-index:6;
}
.daidai {
	margin-left:-27px;
	padding-top:15px;
	border:1px solid #333;
	border-radius:32px 31px 25px 22px / 25px 26px 25px 25px;
	width:55px;
	height:30px;
	-moz-box-shadow:0px 3px 5px rgba(0,0,0,0.3), inset -4px -5px 13px rgba(0,0,0,0.65);
	-webkit-box-shadow:0px 3px 5px rgba(0,0,0,0.3), inset -4px -5px 13px rgba(0,0,0,0.65);
	box-shadow:0px 3px 5px rgba(0,0,0,0.3), inset -4px -5px 13px rgba(0,0,0,0.65);
	background-color:#F4BF06;
	position:absolute;
	left:50%;
	top:10px;
	z-index:5;
	text-align:center;
}
.mochiS {
	margin-left:-90px;
	border:1px solid #333;
	border-radius:100px 100px 40px 40px / 50px 50px 30px 30px;
	width:180px;
	height:70px;
	background-color:#FFF;
	-moz-box-shadow:0px 3px 5px rgba(0,0,0,0.3), inset -4px -5px 13px rgba(0,0,0,0.65);
	-webkit-box-shadow:0px 3px 5px rgba(0,0,0,0.3), inset -4px -5px 13px rgba(0,0,0,0.65);
	box-shadow:0px 3px 5px rgba(0,0,0,0.3), inset -4px -5px 13px rgba(0,0,0,0.65);
	position:absolute;
	left:50%;
	top:50px;
	z-index:4;
}
.mochiL {
	margin-left:-125px;
	border:1px solid #333;
	border-radius:100px 100px 40px 40px / 50px 50px 30px 30px;	
	width:250px;
	height:80px;
	background-color:#FFF;
	-moz-box-shadow:inset -4px -5px 20px rgba(0,0,0,0.65);
	-webkit-box-shadow:inset -4px -5px 20px rgba(0,0,0,0.65);
	box-shadow:inset -4px -5px 20px rgba(0,0,0,0.65);
	position:absolute;
	left:50%;
	top:110px;
	z-index:3;
}
.shihoubeni {
	margin-left:-120px;
	border-width:120px 120px 0 120px;
	border-color:#333 transparent transparent transparent;
	border-style:solid;
    /*　↑上の罫線以外は透明にしてます↑　*/  
	width:0;
	height:0;
	position:absolute;
	left:50%;
	top:160px;
	z-index:10;
	-moz-transform:scale(1,0.5);
	-webkit-transform:scale(1,0.5);
	transform:scale(1,0.5);
}
.shihoubeni:before {
	margin-left:-116px;
	border-width:116px 116px 0 116px;
	border-color:#F00 transparent transparent transparent;
	border-style:solid;
	display:block;
	content:'';
	width:0;
	height:0;
	position:absolute;
	left:50%;
	top:-119px;
	z-index:11;
}
.shihoubeni:after {
	margin-left:-110px;
	border-width:110px 110px 0 110px;
	border-color:#FFF transparent transparent transparent;
	border-style:solid;
	display:block;
	content:'';
	width:0;
	height:0;
	position:absolute;
	left:50%;
	top:-119px;
	z-index:12;
}
.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);
}
.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);
}

∴∵

さーて来週のマークアップブログは？
『CSSでは描けない伊達巻』
『正月太りからのダイエット』
『あっちゃん初日の出を見に行く』
の3本でお送りいたします（嘘）。

ということで、本年もどうぞよろしくお願いいたします。
※次回は鏡餅制作で使ってるプチテクニックの解説をします（予定）

→画像は一切つかわずにcss3で鏡餅を描く①を読みに行く