Css 使边框高度相对于父高度

这是给你的脑筋急转弯。我正在使用CSS制作一个带有小“飞出”的横幅（注意基线高度为1.5em）：

HTML

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

查看此内容！

用三角形的襟翼做一个性感的小横幅。问题是，如果出现断线，高度增加，则左右襟翼大小相同。没有JS如何实现这一点？我想坚持使用边界解决方案，这样我就可以控制颜色（红色是前景，白色是背景）

我能想到的唯一其他解决方案是使用背景色（红色），背景图像为白色三角形，高度为100%。如果我设置正确的位置，它将给出我认为相同的外观，但需要2个PNG/GIF图像

有什么想法吗？

这个怎么样

它处理第一行换行（在布局再次中断之前最多支持2行）。至少要灵活一点。您可以调整

bannerContent

div等的

top

css属性

CSS:

测试标记：

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

查看此内容！这里有一些很长的文字。

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>