边界角:三角形 [英] Border Corners: Triangle
本文介绍了边界角:三角形的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
有可能摆脱边界角落的三角形形状吗? (当使用不同的颜色边框时)
查看此示例:
任何解决方法?基本上我只想让顶部和底部边框继续,而不是所有的混合。
.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;
}
一个单嵌套元素的解决方案, code> border-color 是包装元素的 background-color
,宽度由
< 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;
}
Is it possible to get rid of the "triangle" shape in the border corners? (when using different color borders)
See this example:
Any workaround? Basically I just want the top and bottom border to continue, and not have a mix of all of them.
.borders {
width:500px;
height:500px;
background:#efefef;
border:10px solid black;
border-top:10px solid red;
border-bottom:10px solid green;
}
解决方案
One option using generated content:
.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;
}
Or with nested HTML (if you really must):
<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;
}
And a single-nested-element solution in which the left, and right, border-color
is the background-color
of the wrapping element, and the width controlled by the margin
of the descendant:
<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;
}
这篇关于边界角:三角形的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文