HTML – 边界角：三角形

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

看这个例子：

任何解决方法？基本上我只想让顶部和底部边框继续,而不是混合使用它们.

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

最佳答案

使用生成内容的一个选项：

.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.

和单嵌套元素解决方案,其中左边和右边的边框颜色是包装元素的背景颜色,宽度由后代的边距控制：

<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.

点击查看更多相关文章

转载注明原文：HTML – 边界角：三角形 - 代码日志