should i use css for this background image - css

Question

I'm trying to find out if it's possible to replicate this background with CSS.
I thought about using a skew (similar to the example below) but not having much luck so far.
http://jsfiddle.net/EA3RY/
#chevron {
position: relative;
text-align: center;
padding: 12px;
margin-bottom: 6px;
height: 60px;
width: 200px;
}
#chevron:before {
content: '';
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 51%;
background: #ccc;
-webkit-transform: skew(0deg, 6deg);
-moz-transform: skew(0deg, 6deg);
-ms-transform: skew(0deg, 6deg);
-o-transform: skew(0deg, 6deg);
transform: skew(0deg, 6deg);
}
#chevron:after {
content: '';
position: absolute;
top: 0;
right: 0;
height: 100%;
width: 50%;
background: #ccc;
-webkit-transform: skew(0deg, -6deg);
-moz-transform: skew(0deg, -6deg);
-ms-transform: skew(0deg, -6deg);
-o-transform: skew(0deg, -6deg);
transform: skew(0deg, -6deg);
}
I guess my question #1 is it possible? and #2 is it good practice to use CSS in this situation? Maybe I'm just better off using a background image.

Answer 1

I don't think transform is the right tool for this job; it's a lot of work for the browser to do just to render a shape like that.
Alternative I'd suggest considering:
linear-gradient.
CSS Gradients can do a lot more than just easing from one colour to another. You can draw all kinds of patterns with them. Here's a page with some examples you might want to look at. None of them are exactly what you're looking for, but they do demonstrate some of the things you can do with gradients which you might not have appreciated.
SVG.
Using an SVG image for your background gives you complete flexibility over how it looks. Basically it's an image; it can be anything. But an SVG for an image like this should be pretty light-weight in terms of filesize, and you can include it directly in the CSS code as a data URL. Quick and easy.

Answer 2

I gave it a shot. It looks fine on Chrome and IE, but not in Firefox. Problem is any content you place in the top and bottom parts will appear in the same spot as the middle.
<div class="fancy-up"></div>
<div class="fancy">content in here!</div>
<div class="fancy-down"></div>
c
.fancy {
background-color: #FFA500;
height: 100px;
width: 500px;
}
.fancy-up {
border-right: 500px solid #FFA500;
border-top: 30px solid rgba(0, 0, 0, 0);
height: 0;
width: 0;
}
.fancy-down {
border-bottom: 30px solid rgba(0, 0, 0, 0);
border-right: 500px solid #FFA500;
height: 0;
width: 0;
}
Fiddle
Reference