html - CSS 消除了 'bordered' 元素 Angular 上的 45deg 切割

Question

http://jsfiddle.net/2tm8g6zn/

CSS:

div{

    height: 20px;
    width: 20px;
    float: left;
    border-style: solid;
    border-color: black;
    border-width: 3px;
    border-left-color: transparent;
    border-right-color: transparent;

}


.start {
 border-left-color: black;   
}

.stop {
 border-right-color: black;   
}

html:

<div class='start'></div><div></div><div></div>....etc....<div class='stop'></div>

鉴于此，它创建了一个 div 网格，形成一个长轮廓矩形。但是，在 div 相遇的地方，分别由 border-top 和 border-bottom 的边缘形成一个三 Angular 形凹口。见:

我很好奇是否有任何方法可以使用 css 或 javascript 来消除这些缺口 - 将边框扩展到 div 的边缘而不在每个 Angular 上进行 45 度切割？

我意识到答案可能是“否”。但如果有人能弄清楚，你可以!

谢谢，将

Answer 1

只需使用border-left: 0 和border-right: 0 而不是transparent http://jsfiddle.net/2tm8g6zn/3/

div{

height: 20px;
width: 20px;
float: left;
border-style: solid;
border-color: black;
border-width: 3px;
border-left: 0;
border-right: 0;
}

.start {
border-left: 3px solid black;
}
.stop {
border-right: 3px solid black;
}

.with-box-sizing, .without-box-sizing {
overflow: hidden;
width: auto;
float: none;
border: 0;
height: auto;
margin-bottom: 10px;
}

.with-box-sizing * {
box-sizing: border-box;
}

<div class="without-box-sizing">
<div class='start'></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div class='stop'></div>
</div>


<div class="with-box-sizing">
<div class='start'></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div class='stop'></div>
</div>

设置 border-color: transparent 告诉浏览器，“是的，我想要边框，它们的颜色必须是透明的”，所以这些三 Angular 形是在水平和垂直边框相交的地方创建的。