css - 使边框高度相对于父高度

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>

用那些三 Angular 形剪裁的襟翼做一个性感的小横幅。麻烦的是，如果有换行符并且高度增加，则左右襟翼的大小相同。任何想法如何在没有 JS 的情况下实现这一目标？我想坚持使用边框解决方案，这样我就可以控制颜色(红色是前景，白色是背景)。

我能想到的唯一其他解决方案是使用背景颜色(红色)和白色三 Angular 形的背景图像以及 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>