html - 边角：三角形

Question

是否有可能摆脱边框角落的“三角形”形状？（使用不同颜色边框时）

看这个例子：

http://jsfiddle.net/GLsqV/

任何解决方法？基本上我只希望顶部和底部边框继续，而不是混合在一起。

 .borders {  
   width:500px;
   height:500px;
   background:#efefef;
   border:10px solid black;
   border-top:10px solid red;
   border-bottom:10px solid green;
 }​

Answer 1

使用生成内容的一种选择：

.borders {
    width:500px;
    height:500px;
    position: relative;
    background:#efefef;
    border-top:10px solid red;
    border-bottom:10px solid green;
}

.borders::before,
.borders::after {
    content: '';
    position: absolute;
    width: 10px;
    top: 0;
    bottom: 0;
    background-color: #000;
}

.borders::before {
    left: 0;
}

.borders::after {
    right: 0;
}

JS 小提琴演示。

或者使用嵌套的 HTML（如果你真的必须）：

<div class="borders">
    <div class="innerBorder left"></div>
    <div class="innerBorder right"></div>
</div>​

.borders {
    width:500px;
    height:500px;
    position: relative;
    background:#efefef;
    border-top:10px solid red;
    border-bottom:10px solid green;
}

.borders .innerBorder{
    content: '';
    position: absolute;
    width: 10px;
    top: 0;
    bottom: 0;
    background-color: #000;
}

.borders .left {
    left: 0;
}

.borders .right {
    right: 0;
}

JS 小提琴演示。

还有一个单嵌套元素解决方案，其中左和右border-color是background-color包装元素的 ，而宽度由margin后代的 控制：

<div class="borders">
    <div class="inner"></div>
</div>​

CSS：

.borders {
    width:500px;
    height:500px;
    background-color: #000;
    border-top:10px solid red;
    border-bottom:10px solid green;
}

.borders .inner {
    background-color: #efefef;
    height: 100%;
    margin: 0 10px;
}

JS Fiddle 演示。​</p>

Answer 2

不是到处都有一个元素。（实际上，默认的三角形边框使伟大的事情成为可能：CSS 的形状）

但是，您所要求的内容很容易在任何地方都可以使用另一个子元素。

CSS：

.borders {
  width: 520px;
  height: 500px;
  border-top: 10px solid red;
  border-bottom: 10px solid green;
}

.borders2 {
  background: #efefef;
  width: 500px;
  height: 500px;    
  border-left: 10px solid black;
  border-right: 10px solid black;
}

​ HTML：

<div class="borders">
  <div class="borders2">
  </div>
</div>​

使用这些值，outerDIV的边界框仍将具有 520×520 像素的大小。

另见这个小提琴。

Answer 3

这就是边界的工作方式。否则浏览器将如何决定哪些与角落重叠？

您可以使用嵌套的 DIV 或使用带有 :before 和 :after 的技巧以及一些绝对定位来实现此效果。