『初恋限定。』風デザイン

アニメ『初恋限定。』のタイトルロゴや各話のタイトルと予告で使われていた飾りをCSSで再現してみました。HTMLでは以下のようにDIVを3つ用意するだけです。

<div id="corearea">
<p>『初恋限定。』風デザイン</p>
</div>
<div id="vborder">&nbsp;</div>
<div id="hborder">ハツコイリミテッドフウデザイン</div>

これをCSSを使って左下の枠となるようにvborderとhborderを配置します。

#corearea {
	margin:			0 0 0 1em;
	padding:		0;
	border:			solid 2px #f09;
	border-style:		none none solid solid;
}
#vborder {
	background-color:	#f09;
	margin:			-8em 0 0 0.5em;
	width:			1em;
	height:			8em;
}
#hborder {
	margin:			-1ex 0 0 0.5em;
	color:			#fff;
	background-color:	#f09;
	width:			50%;
	height:			1em;
	text-align:		right;
	padding-right:		1em;
}

marginをうまく利用して位置を調整してみたら思ったよりも簡単に再現できました。

アレンジする際には、最小構成のHTMLファイルを保存してご利用ください。