HTML – 边界角:三角形

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

看这个例子:

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;
 }​
最佳答案
使用生成内容的一个选项:

.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 – 边界角:三角形 - 代码日志