使用css正确模拟边框到“功能区”的问题。我该如何纠正？

Question

在与css发生一点争吵后，我设法用最少的IE8和其他浏览器支持“色带”。 现在我想添加一个边框，但我无法得到它。

HTML：

<div class="ribbonEX07">
<a href="#"><span>· TITLE·</span></a>
<div class="ribbonEX07-border"></div>

CSS：

    .ribbonEX07 {
    display:inline-block;
    margin-left: 50px;
    border-bottom: 0.2em solid #f2cec2;
    position: absolute;
}

.ribbonEX07:after {
    content: "";
    float:left;
    border:1.5em solid #faefeb;
    border-right-color: transparent;
}

.ribbonEX07 span {
    float:left;
    overflow:hidden;
    background:#faefeb;
    color: #cd3301;
    display:inline-block;
    line-height:3em;
    padding:0 1em;
    position: relative;
}

.ribbonEX07-border{
    position: inherit;
    width: 100%;
    height: 100%;
    z-index: -1;
    border-width: 15px 10px 25px 35px;
    border-top: 30px solid #f2cec2;
    border-right: 10px solid transparent;

}

http://jsfiddle.net/L5H5U/

Answer 1

将阴影样式从.ribbonEX07-border移动到.ribbonEX07-border:after，这样可以使其具有弹性，因此可以处理长标题。

.ribbonEX07-border {
    position: absolute;
    z-index: -1;
    right: 26px;
}
.ribbonEX07-border:after{
    content: " ";
    display: inline-block;
    border-top: 29px solid #f2cec2;
    border-right: 29px solid transparent;
    width: 100%;
}

以下是一个有效的例子：http://jsfiddle.net/BAkJG/

Answer 2

将您的风格改为

.ribbonEX07-border{
    position: inherit;
    width: 81%;
    height: 100%;
    z-index: -1;
    border-width: 15px 10px 25px 35px;
    border-top: 29px solid #f2cec2;
    border-right: 29px solid transparent;
}

fiddle