нужно создать этот образ без изображения

Question

Ok, поэтому я задал вопрос и получил справку о создании образа с чистым CSS, расположенным здесь: Ribbon and stars - How to get this done without an image file?

Но этот метод, ставит border-color по бокам изображений в чтобы сделать краевой эффект ленты. Но теперь мне нужно сделать что-то, как на картинке ниже:

Так, не знаю, как это сделать с помощью метода ленты, представленной здесь (если вообще возможно): http://jsfiddle.net/a498M/1/

Я считаю, что это можно сделать в CSS с HTML, просто нужно немного помочь в реализации этого. Вот код, который я до сих пор на этом:

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; 

Это для езды. Это было довольно простое решение. Надеюсь это поможет!