css - 画像なしでこの画像を作成する必要があります

Question

わかりましたので、ここにある純粋な CSS を使用して画像を作成する方法について質問し、ヘルプを受け取りました: リボンと星 - 画像ファイルなしでこれを行う方法は?

ただし、この方法ではborder-color、リボンのコーナー効果を出すために、画像の側面に を配置します。しかし今、私は下の画像のようなことをする必要があります:

そのため、ここで提供されているリボンの方法を使用してこれを行う方法がわからない (可能であれば): http://jsfiddle.net/a498M/1/

これは HTML を使用した CSS で実行できると思いますが、これを実装する方法について少し助けが必要です。これは私がこれまでに持っているコードです:

CSS:

div.name_container {
    text-align: center;
}
h1 {
    font-family: "MissionGothic-Regular", "Mission Gothic Regular Regular", "mission_gothicregular";
    font-size: 2.2em;
    margin: 0 auto;
    background:#BF2C24;
    display: inline-block;
    padding: 0 1.5em;
    color: #f2efe9;
    position: relative;
    height: 1.4em;
    line-height: 1.4em;
    text-transform: uppercase;
    z-index: 10;
}
h1:before { /* this will create white triangle on the left side */
    position: absolute;
    content: "";
    top: 0px;
    left: 0px;
    height: 0px;
    width: 0px;
    border-top: .7em solid transparent;
    border-left: .7em solid #f2efe9; 
    border-bottom: .7em solid transparent;
    z-index: 8;
}
h1:after { /* this will create white triangle on the right side */
    position: absolute;
    content: "";
    top: 0px;
    left: auto;
    right: 0px;
    height: 0px;
    width: 0px;
    border-top: .7em solid transparent;
    border-right: .7em solid #f2efe9; 
    border-bottom: .7em solid transparent; 
    z-index: 8;
}
h1 span.sidestar-left, h1 span.sidestar-right {
    position: absolute;
    font-size: .6em;
    top: 0;

}
h1 span.sidestar-left {
    left: 1.8em;
}
h1 span.sidestar-right {
    right: 1.8em;
}

HTML:

<div class="name_container">
    <h1><span class="sidestar-left">&#9733;</span>&nbsp;&nbsp;Kristine&nbsp;Coady&nbsp;&nbsp;<span class="sidestar-right">&#9733;</span></h1>
</div>

このリボンの下に何らかの要素を追加する必要がありdivますが、このように見えないようにするにはどうすればよいでしょうか?

したがって、h1:afterおよびh1:beforeがこの問題を引き起こしています。色の問題を引き起こしているこの縁取りなしで、このリボン効果を得ることができますか? 最初の画像のように見えるようにする必要があります。透明でその下の画像が透けて見えるか、境界線の上半分に 1 色を付け、境界線の下半分に別の色を付けることができますか? しかし、どのように??