罫線上にキャプションがあるステッカー

解説

このステッカーは、以下のようにコンテンツと各種表示部分で構成されています。

div.pointbox                // ステッカーボックス本体
├ div.content               // テキスト表示領域
└ div.visual                // 装飾部分表示領域
    ├ div.background        // 右下にちょっとずれた背景
    ├ div.border-left       // 左側の逆コの字型のボーダー
    ├ div.border-center     // 中央の下部だけ表示してあるボーダー。キャプションもこのボックスの中。
    └ div.border-right      // 右側のコの字型のボーダー
        

.pointboxの大きさ決定について

visualクラス中の装飾要素は、pointboxのwidth, heightがしっかり決まらないとずれてしまいます。これは.pointboxの子要素をdiv.contentとdiv.visualに分け、 div.contentに先にテキストをレンダリングさせて親要素としてのwidth, heightを確定させるようにしています。

装飾要素の調整

背景色をボックスより少し右下にずらす細工を行っています。div.visualのpositionにstatic以外の要素を指定すれば子要素のdiv.backgroundはposition: abs oluteで div.visualからの絶対座標で位置を決定することができます。

ボックスのborderについては、ボックス自体を横3つに分離させます。両端はコの字型にborderを設定しますが、中央のボックスはbottomのみにborderを設定します。 また、border-topを指定しない代わりにキャプションとなる文字列を入力しておけばtopの罫線の上に文字が書かれているような表現が可能になります。 両側のボックスのborder-topの位置指定は、キャプションとなる文字フォントのベースラインに依存するので、margin-topを細かく調整する必要があると思われます。

詳しくはsourceディレクトリのscssファイルを見ていただければと思います。