CSSでリボン #CSS

CSSでリボン風の見出しを作る。という何番煎じかわからないネタ。

ribbon.html

<!DOCTYPE html>
<html>
    <head>
        <title>リボン</title>
    </head>
    <body>
        <h1>リボンのテストです。</h1>
    </body>
</html>

ribbon.css

html, body
{
    margin: 0;
    padding: 0;
}

body > h1
{
    /* 余白は適当に調整してください */
    margin: 20px 0 20px 0;
    padding: 0 160px 0 60px;
    /* サイズも適当に調整してください */
    font-size: 32px;
    height: 50px;
    line-height: 50px;

    /* 内容に応じた幅になるよう inline-block を指定する */
    display: inline-block;

    color: #FFFFFF;

    /* 今回の本題とは関係ない。文字を立体的にしているけどあんま効果感じない */
    text-shadow: 2px 2px 0 rgba(0, 0, 0, 1);

    /* ここがステッチになる */
    border-style: dashed none;
    border-width: 1px;
    border-color: #FFFFFF;

    /* relative にしてスタックを生成 */
    position: relative;
    /* before 擬似要素を裏に持っていくために必要 */
    z-index: auto;
}

    body > h1:before
    {
        content: "";

        /* 右側のボーダーだけ透明色とすることでリボンの形を表現 */
        border-style: solid;
        border-color: #131132 transparent #131132 #131132;
        border-width: 30px;
        height: 0;

        /* 立体感出してるだけ */
        box-shadow: -1px 1px 1px #000000;

        /* 位置の指定 */
        position: absolute;
        left: 0;
        right: -7px;
        top: -5px;
        bottom: 0;

        /* z-index を負の数にして h1 より後ろに持っていく */
        z-index: -1;
    }

IE8だとステッチが出ないようだ。気が向いたら改良します。