需要在没有图像的情况下创建此图像

Question

好的，所以我提出了一个问题并获得了有关使用纯CSS创建图像的帮助，位于此处：Ribbon and stars - How to get this done without an image file?

但是这种方法在图像两侧放置border-color以使色带角落效果。但现在我需要做类似下图的事情：

所以，不知道如何使用此处提供的功能区方法（如果可能的话）执行此操作：http://jsfiddle.net/a498M/1/

我相信这可以用CSS做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颜色和边框的下半部分可能是不同的颜色？但是如何？

Answer 1

border-top: 20px solid #A52927;
border-right: 20px solid transparent; 
border-bottom: 20px solid #A52927;
margin-right:-20px;

那是骑行方面的。这是一个相当简单的修复。希望这有帮助！