Making border height relative to parent height

Here is a brain teaser for you. I'm making a banner with little "fly outs" using CSS (note the base line height is 1.5em):

.banner {
background-color:red;
color:white;
padding:1.5em 0;
position:relative;
}

.bannerLeft,
.bannerRight {
border-style:solid;
border-width:2.25em 20px;
height:0;
position:absolute;
width:0;
}
.bannerLeft { top:6px; left:-40px; border-color:red red red white; }
.bannerRight { top:6px; right:-40px; border-color:red white red red; }

The HTML

<div class="banner">Check out this content!<span class="bannerLeft"></span><span class="bannerRight"></span></div>

Makes a sexy little banner with those triangle cut flaps. Trouble is if there is a line break and the height increases then the left and right flaps are the same size. Any ideas how to achieve this without JS? I want to stick with the border solution so I have control of the color (red is foreground and white i开发者_开发知识库s background).

The only other solution I can think of is to use a background color (red) with a background image of a white triangle and a height of 100%. If I set the position correctly it would give the same appearance I think, but would require 2 PNG/GIF images.

Any ideas?

---

How about this?

http://jsfiddle.net/suu4N/

It addresses the first line wrap (supports up to 2 lines before layout again breaks). At least is a little more flexible. You can adjust the top css attribute for the bannerContent div, etc.

CSS:

body
{
    padding:40px;
}
.banner {
    background-color:red;
    color:white;
    position:relative;
    height:65px;
}
.bannerLeft,
.bannerRight {
    border-style:solid;
    border-width:2.25em 20px;
    position:absolute;
    width:0;
}
.bannerLeft {
    top:6px; left:-40px;
    border-color:red red red white;
}
.bannerRight {
    top:6px; right:-40px;
    border-color:red white red red;
}

.bannerContent {
    position:relative;
    top:20%;
    text-align:center;
}

Test markup:

<div class="banner">
    <span class="bannerLeft" />
    <div class="bannerContent">
        Check out this content! Here is some really long text. 
    </div>
    <span class="bannerRight" />
</div>