html - 具有直线过渡的两种颜色边框

Question

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

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

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

Answer 1

演示

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 不支持伪元素。有一个很棒的 polyfill 叫做ie9.js，或者你可以添加一个额外的<span>元素并按照下面的方法：

---

演示跨浏览器

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

看到这个 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中工作（因为它不支持 :after和伪选择器），在你的内部:before创建一个，给它一个类（假设它是），并使用与上面样式相同的东西来设置它的样式。divdiv.borderdiv.yourdiv:after

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