How can I achieve this ribbon effect with CSS? - html

Question

I am trying to achieve this effect. I want the two bars on each side to extend to the edge of the page. This is the closest I've come. I obviously need to flip the "folds" somehow, and I need to get each light blue bar to extend to the edge of the page.
http://jsfiddle.net/vPJ8g/
<div id="ribbon">
<span id="content">Call us today! 555-555-5555</span>
</div>
*{margin:0px;padding:0px;}
html {
width:100%;
height:100%;
background:#CCC;
text-align: center;
}
#ribbon {
padding: .5em 2em;
margin: 0;
margin-top: 5%;
position:relative;
color: #ffffff;
font: 20px 'Arial', sans-serif;
text-align: center;
background: #5f85b4;
display: inline-block;
}
#ribbon:before, #ribbon:after {
content: "";
width:1em;
top:-.5em;
position:absolute;
display:block;
border: .9em solid #1eb2df;
z-index:-2;
}
#ribbon:before {
left:-1.5em;
}
#ribbon:after {
right:-1.5em;
}
#content:before, #content:after {
content:"";
bottom:2.1em;
position:absolute;
display:block;
border-style:solid;
border-color: #2c4059 transparent transparent transparent;
z-index:-1;
}
#content:before {
left: 0;
border-width: .5em 1em 0 0;
}
#content:after {
right: 0;
border-width: .5em 0 0 1em;
}

Answer 1

You can use display: table; and display: table-cell; and some markup changes to achieve the results you are going for.
I removed your #content as it's a redundant identifier. You can use ancestor selections from the #ribbon to achieve the same results, without hogging a unique ID.
HTML:
<div id="ribbon">
<div>
<span>Call us today! 555-555-5555</span>
</div>
</div>
CSS:
#ribbon {
display: table;
margin: 0;
margin-top: 5%;
position:relative;
color: #ffffff;
font: 20px 'Arial', sans-serif;
text-align: center;
width: 100%
}
#ribbon:before, #ribbon:after {
content: "";
width:25%;
top:-.5em;
position:absolute;
display: table-cell;
border: .9em solid #1eb2df;
z-index:-2;
}
#ribbon:before {
left:-1.5em;
}
#ribbon:after {
right:-1.5em;
}
#ribbon > div {
margin: 0;
display: table-cell;
position: relative;
width: 53%;
}
#ribbon span {
display: block;
color: #ffffff;
font: 20px 'Arial', sans-serif;
text-align: center;
background: #5f85b4;
padding: .5em 2em;
position: relative;
}
#ribbon span:before, #ribbon span:after {
content:"";
bottom:2.1em;
position:absolute;
display: block;
border-style:solid;
border-color: #2c4059 transparent transparent transparent;
z-index:-1;
top: -10px;
}
#ribbon span:before {
left: 0;
border-width: .5em 1em 0 0;
}
#ribbon span:after {
right: 0;
border-width: .5em 0 0 1em;
}
Example: http://jsfiddle.net/vPJ8g/4/

Answer 2

To get the ribbon to stretch across the whole page, make #ribbon:before and #ribbon:after really big and use a combination of positioning and margins to get them where they need to be:
#ribbon:before {
width: 1000000em;
left: 0;
margin-left: -1000000.8em;
}
#ribbon:after {
width: 1000000em;
right: 0;
margin-right: -1000000.8em;
}
http://jsfiddle.net/BYossarian/vPJ8g/7/
And to flip the triangular folds bits just play with the border-color property:
#content:before {
left: 0;
border-width: .5em 1em 0 0;
border-color: transparent #2c4059 transparent transparent;
}
#content:after {
right: 0;
border-width: .5em 0 0 1em;
border-color: transparent transparent transparent #2c4059;
}
http://jsfiddle.net/BYossarian/vPJ8g/8/