使用CSS技巧裁剪边框

Question

问题是..。

我试图把div的位置放在一个边界上，同时在每个div的两边都留下一个缺口。参见：

​

​

注意到黑色div.两边的间隙。

除了以下两个明显的方案外，我看不出有一个可能的解决办法：

1. 将边框放置在整个宽度上，然后用背景覆盖图像，以隐藏边框。
2. 或者，将边框分割成列，然后添加一个边距(在我的例子中可能是最好的解决方案)。

我试过的..。

当我来到这里，希望得到一个很酷的CSS技巧，我没有尝试任何东西，因为我不知道从哪里开始.因此，一个很酷的CSS技巧..。

我的问题(如果还不清楚的话)

是否有任何方法(除了上面提到的方法)，或酷的技巧，以实现我在上面的图像说明？

更新

这里有一个jsFiddle展示了它是什么样子的，没有我想要的缺口

http://jsfiddle.net/BDt7v/

Answer 1

这个怎么样:让我们用一些生成的内容来“裁剪”div的左右边框每个div得到a:先和:生成的内容伪元素，以及那些我们样式的高度为零和白色边框-顶部和灰色边框-一半红色边框宽度的底部-然后我们只定位它们绝对. 这是小提琴。

<div id="outer">
    <div></div>
    <div></div>
    <div></div>
</div>

#outer {
    margin-top:50px;
    padding-bottom:50px;
    border-top:4px solid red;
    background:#ccc;
    text-align:center;
}
#outer div {
    position:relative;
    display:inline-block;
    margin:-27px 25px 0 25px;
    width:50px;
    height:50px;
    background:#000;
}
#outer div:after, #outer div:before {
    content:" ";
    position:absolute;
    top:23px;
    width:5px;
    height:0;
    overflow:hidden;
    border-top:2px solid #fff;
    border-bottom:2px solid #ccc;
}
#outer div:after {
    left:-5px;
}
#outer div:before {
    right:-5px;
}