是否有可能摆脱边角的“三角”形状? (使用不同颜色的边框时)
看这个例子:
任何解决方法?基本上我只想让顶部和底部边框继续,而不是混合使用它们.
.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;
}
或者使用嵌套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;
}
和单嵌套元素解决方案,其中左边和右边的边框颜色是包装元素的背景颜色,宽度由后代的边距控制:
<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;
}
相关文章
转载注明原文:HTML – 边界角:三角形 - 代码日志