两个颜色边框，直线过渡

Question

我正在尝试在div的底部实现不同颜色的边框，但没有像这样的对角边缘：

我已经查看了:before选择器，但我无法让它工作。如何在CSS中实现这一目标。我也喜欢兼容IE7。

这是我创造的一个小小提琴。 http://jsfiddle.net/EYjCV/11/

Answer 1

Demo

HTML：

<div class="bordered">Hey Hey Hey</div>​

CSS：

.bordered {
    background-color: red;
    border: 5px solid blue;
    padding-bottom: 10px;
    margin-bottom: 10px;
    margin-top: 15px;
    width:100px;
    position:relative;
}
.bordered:before {
    position:absolute;
    bottom:-5px; left:0; right:0;
    content:" ";
    color: transparent;
    border-bottom: 5px solid lime;
}​

IE7不支持伪元素。有一个名为ie9.js的精彩填充物，或者您可以添加其他<span>元素，并按照以下方法操作：

---

Demo crossbrowser

HTML：

<div class="bordered">Hey Hey Hey<span></span></div>​

CSS：

.bordered {
    background-color: red;
    border: 5px solid blue;
    padding-bottom: 10px;
    margin-bottom: 10px;
    margin-top: 15px;
    width:100px;
    position:relative;
}
.bordered span {
    position:absolute;
    bottom:-5px; left:0; right:0;
    border-bottom: 5px solid lime;
}​

Answer 2

请参阅this jsFiddle。

这是大纲，HTML：

<div class = "yourdiv">Glee is awesome!</div>

CSS：

.yourdiv{
    border: 10px skyblue solid; /*or whatever your border definition is*/
    position: relative; /*necessary*/
    /*stuff for prettiness*/
    background: rgb(0, 162, 232);
    color: white;
    width: 200px;
    height: 200px;
}
.yourdiv:after {
    content: '';
    position: absolute;
    bottom: -10px; /*width of border, negated*/
    height: 10px; /*width of border*/
    left: 0;
    right: 0; /*make sure it spans the whole space horizontally*/
    background: orange; /*blue, in your case*/
}

要在 IE7 （因为它doesn't support :after和:before伪选择者）中工作，请在{{1}内创建div给它一个类（假设它是div），并使用与上面.borderdiv样式相同的东西来设置样式。

适用于IE7的修改版本：little link。