相對於父母身高製作邊框高度

Question

這是您的頭腦傳情。我正在與小「飛奏」的橫幅使用CSS（注意基線高度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; } 

的HTML

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

使這些三角形的剪裁一個性感的小旗幟襟翼。麻煩的是，如果有折線並且高度增加，那麼左側和右側襟翼的大小相同。任何想法如何實現這個沒有JS？我想堅持使用邊框解決方案，以便控制顏色（紅色是前景，白色是背景）。

我能想到的唯一的其他解決方案是使用背景顏色（紅色）和白色三角形的背景圖像以及100％的高度。如果我正確設置位置，它會給我相同的外觀，但需要2個PNG/GIF圖像。

任何想法？

Answer 1

這個怎麼樣？

http://jsfiddle.net/suu4N/

它涉及的第一行渦卷（最多佈局前2行再次支持中斷）。至少是更靈活一點。您可以調整bannerContent DIV的top CSS屬性等

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

測試標記：

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