親の高さに合わせてボーダーの高さを設定する

Question

ここはあなたの脳のお誘いです。

.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; } 

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

は、それらの三角形のカットでセクシーなバナーを作りHTML：私はCSSを使用した小さな「フライアウト」とのバナーを作ってるんだ（ベースラインの高さが1.5emであることに注意）フラップ。問題は、改行があり、高さが増加し、左右のフラップが同じサイズである場合です。任意のアイデアはどのようにJSなしでこれを達成するために？私は境界の解決策に固執したいので、私は色のコントロールを持っています（赤は前景、白は背景です）。

私が考えることができる唯一の他の解決策は、白い三角形の背景画像と高さ100％の背景色（赤色）を使用することです。ポジションを正しく設定すると、同じような外観が得られますが、2つのPNG/GIF画像が必要になります。

アイデア？

Answer 1

これはいかがですか？

http://jsfiddle.net/suu4N/

それは（レイアウトが再び壊れる前に2行までサポート）最初の行の折り返しに対応しています。少なくとももう少し柔軟性があります。

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; 
} 

テストマークアップ：

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

あなたはCSS

など、 bannerContentのdivのため

をtop CSS属性を調整することができます