在功能区底部添加边框

Question

我已经创建了一个垂直色带，但我试图完成它的最后一部分。我需要在底部角度添加一个2像素的红色边框，如图所示。

.thumbnails .span4 { position:relative;height:300px; }
.ribbon { position:absolute;float:right;margin-right:20px;height:87px;width:75px; }
.ribbon { background: #f6f6f6;border-radius: 1px 1px 0 0;height: 87px;margin: 0 auto;position: absolute;width: 74px;right:20px; }
.ribbon:after,.ribbon:before { border-top: 12px solid #f6f6f6;content: '';height: 0;position: absolute;top: 100%;width: 0; }
.ribbon:after { border-left: 74px solid transparent; }
.ribbon:before { border-right: 74px solid transparent; }
.img-box { height:205px;display:block; }

<div class="span4 thumb crop">
    <div class="ribbon"></div>
    <div class="img-box"></div>
    <div class="caption">
        <h1>Title</h1>
        <p>Text</p>
    </div>
</div>

Answer 1

如果您需要纯CSS解决方案，可以使用transform：skew而不是透明渐变来创建伪元素。

你可能会尝试在那些偏斜的伪元素上没有扩散的盒子阴影，但更好的结果可能需要额外的（非语义）div来装饰：

<div class="ribbon">
    <div class="ribbonDecoration left"></div>
    <div class="ribbonDecoration right"></div>
</div>

.ribbon { 
    position:absolute;
    margin-right:20px;
    height:87px;
    width:75px; 
    background: #f6f6f6;
    border-radius: 1px 1px 0 0;
    height: 87px;
    position: absolute;
    width: 74px;
    right:20px; 
}

.ribbon:after,
.ribbon:before { 
    content: '';
    display: block;
    height: 10px;
    position: absolute;
    top: 94%;
    width: 50%;
    z-index: 0;
    background: #f6f6f6;
}

.ribbon:after {
    left: 50%;
    -moz-transform: skew(0,15deg);
    -webkit-transform: skew(0,15deg);
    transform: skew(0,15deg);
}

.ribbon:before {
    -moz-transform: skew(0,-15deg); 
    -webkit-transform: skew(0,-15deg);
    transform: skew(0,-15deg);
}    

.ribbonDecoration {
    position: absolute;
    bottom: -6px;
    height: 3px;
    width: 50%;
    background: red;
    z-index: 1;
}

.ribbonDecoration.left {
    -moz-transform: skew(0deg,-15deg);
    -webkit-transform: skew(0deg,-15deg);
    transform: skew(0deg,-15deg);
}

.ribbonDecoration.right {
    left: 50%;
    -moz-transform: skew(0deg,15deg);
    -webkit-transform: skew(0deg,15deg);
    transform: skew(0deg,15deg);
}

这是一个小提琴：http://jsfiddle.net/brianhewitt1/bL5p7sg7/

我建议坚持使用90度的除数（例如，15度，30度）以获得更好的渲染效果。事情可能会变得笨拙和像素化。

其他选项（如果您的浏览器支持要求允许...）将是svg背景图像或html5画布元素。

（仅供参考，作为旁注，浮动对于绝对定位的元素不会有任何好处）