强制border-top重叠border-left / border-right

Question

这是小提琴：http://jsfiddle.net/3Ys2d/

CSS

div{
    border: solid 3px blue;
    border-left-color: red;
    border-right-color: red;
    width: 100px;
    height: 50px;
}

我需要让顶部边框在交叉点处完全重叠左右边框。此时它们处于显示两者和交叉点的一部分的角度。

有办法做到这一点吗？

Answer 1

我相信您可以使用.box:before并在position:relative;中添加.box来实现这一目标。

Fiddle

<强> CSS

.box:before{
    content:"";
    position:absolute;
    border-top:3px solid green;
    width:106px;
    left:-3px;
    top:-3px;
}