Creating triangles

You can achieve this (albeit somewhat imprecisely) with the CSS skew transform:

Demo: http://jsfiddle.net/cUWm2/2/

<div class="shape">
    A variable amount of content.
</div>

.shape {
    position: relative;
}
.shape:before {
    content:"";
    -moz-transform: skewX(10deg);
    -webkit-transform: skewX(10deg);
    transform: skewX(10deg);
    width: 140%;
    left: -20%;
    height: 100%;
    background-color: #555;
    position: absolute;
    top: 0;
    z-index: -1;
}

This achieves the requested shape with minimal markup and decent (IE9+ and all other modern) browser support. However, when scaling height up or down, eventually the triangles cease to be triangles and a fourth edge becomes visible. You have several options:

1. Find dimensions that work for a practical amount of content and code to that.
2. Dynamically alter the skew amount using JavaScript.
3. Blend the background of the edge shapes with the main shape.
4. Ignore it (depending on the layout, it doesn't necessarily look bad).

All that said (after playing with various CSS options) I'd probably consider an image-centric solution first. You can use the :before and :after pseudo-elements to create containers which resize vertically along with your main content while staying the same width. You can then use a background image to cover the desired area, or put a 100% x 100% image into the container.

I also agree with using SVGs. I find them easier to manipulate since they're scalable and cross compatible between browsers as they're images. Here's an answer I posted to a similar question, which should get you started: Make CSS3 triangle with linear gradient

From there, it will be easy to set the image heights to match the content's. Here's a jQuery example:

$(document).ready(function() {
     $(".triangle").height($(".content").height());
});

I would solve this by the use of SVGs (Scaleable Vector Graphics). You create the two triangle-SVGs and then make a 3 column layout where all columns are equally heigh (for example by using display: table-cell). You chose the left triangle as background-image for the left column and the right triangle as bg-image for the right one. The middle one is for your content.

Dont forget to use preserveAspectRatio(https://developer.mozilla.org/de/docs/SVG/Attribute/preserveAspectRatio) in your SVG.