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

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>&#9733; KRISTINE COADY &#9733;</h1> <!-- &#9733; 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..