边角：三角形答案

【问题标题】：Border Corners: Triangle边角：三角形
【发布时间】：2012-11-20 03:10:24
【问题描述】：

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

看这个例子：

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

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

【问题讨论】：

标签： html css

【解决方案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 Fiddle demo.

或者使用嵌套的 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 Fiddle demo.

还有一个单嵌套元素解决方案，其中左右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 demo.

【讨论】：

这里一个子元素似乎就足够了。看我的回答。
你完全正确！而且...我已经添加了一个（当然，它是一个不同你自己的单子孙解决方案）=）

【解决方案2】：

不是到处都有一个元素。（实际上，默认的三角形边框使伟大的事情成为可能：The Shapes of 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>

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

另见this fiddle。

【讨论】：

@DavidThomas Dito。我一直在为我的Seri-o-meter 中的徽标广泛使用:before/:after { position: absolute; } 技巧。

【解决方案3】：

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

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

【讨论】：