Ribbon and stars - How to get this done without an image file? - html

Question

I need to create this ribbon and stars look (image attached) without an image file. I know how to put the stars in it, but am needing the ribbon sides like the image is attached. How can I do this without an image file, and just pure CSS and HTML? Am thinking that the border-radius will need to be manipulated here.
This is what I have so far, which is terrible.
How can I use border-radius to get this effect?

Answer 1

I would recommend combining CSS triangles with pseudo elements :before and :after for the side triangles of the ribbon, and html character ★ for the stars:
working jsFiddle
HTML:
<h1>★ KRISTINE COADY ★</h1> <!-- ★ is html star character -->
CSS:
h1{ /* all regular attributes here */
background:#A52927;
display:inline-block;
padding:0px 30px;
color:#EEE4D3;
position:relative;
height:40px;
line-height:40px;
}
h1:before{ /* this will create white triangle on the left side */
position:absolute;
content:"";
top:0px;
left:0px;
height:0px;
width:0px;
border-top: 20px solid transparent;
border-left: 20px solid white;
border-bottom: 20px solid transparent;
}
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: 20px solid transparent;
border-right: 20px solid white;
border-bottom: 20px solid transparent;
}
This way you will not have to use wrappers or border-radius.. You should ofcourse alter the font, font size, height, (etc.) to your needs..