我正在尝试使用箭头分隔符创建3节面包屑类型元素。这是一个简单的模型。
第2部分和第3部分之间有一个奇怪的人工制品。在这种情况下,第3部分的蓝色箭头左侧可以看到第三部分的红色背景(略微),但第2部分的背景干扰部分不会出现同样的问题。 1箭头。谢天谢地,但很奇怪。对我来说,这只发生在Chrome for Mac上(浏览器窗口也没有放大/缩小)。没有测试Windows等任何关于如何解决这个奇怪问题的建议?
在第2和第3部分之间出现的奇怪人工制品(红色垂直线)的放大视图:
在第1节和第2节之间没有出现这种奇怪的假象。
codepen:
https://codepen.io/reacting/pen/xeewdO
html:
<div class="container">
<div class="section">section one</div>
<div class="section two">section two</div>
<div class="section">section three</div>
</div>
css / scss:
.container {
background-color: white;
border: 1px solid grey;
box-sizing: border-box;
width: 100%;
display: flex;
}
.section {
flex: 1;
position: relative;
height: 100px;
background-color: black;
color: white;
display: flex;
justify-content: center;
align-items: center;
&:before {
content:"";
background-color: grey;
-webkit-clip-path: polygon(0% 100%, 100% 50%, 0% 0%);
clip-path: polygon(0% 100%, 100% 50%, 0% 0%);
z-index: 1;
position: absolute;
right: -26px;
top: 0;
width: 25px;
height: 100px;
}
&:after {
content:"";
background-color:black;
-webkit-clip-path: polygon(0% 100%, 100% 50%, 0% 0%);
clip-path: polygon(0% 100%, 100% 50%, 0% 0%);
z-index: 2;
position: absolute;
right: -25px;
top: 0;
width: 25px;
height: 100px;
}
&:last-of-type {
background-color: red;
color: black;
}
&:last-of-type:before {
display: none;
}
&:last-of-type:after {
display: none;
}
&.two {
background-color: blue;
&:after {
background-color: blue;
}
}
}
body {
background-color: #333;
}
我不只是想改变右前:伪选择器的属性小于1像素,因为它只是感觉hacky和错误。
非常感谢!
编辑:我想知道这个问题是否与我的Mac显示器的高分辨率有关 - 当我稍微调整Chrome浏览器窗口的大小时问题来来去去,并且对于1/2部分或者1/2和2部分都发生了变化3或没有。取决于浏览器窗口的大小。但奇怪的是,在Firefox和Safari中,拖动窗口时根本不会发生这种情况。
您可以优化代码并在元素上考虑clip-path
而无需伪元素,然后考虑一些背景颜色来模拟边框
.container {
background-color: white;
border: 1px solid grey;
box-sizing: border-box;
display: flex;
height: 100px;
}
.section {
flex: 1;
color: white;
display: flex;
justify-content: center;
align-items: center;
margin-left:-25px; /* Create an overlap with the previous element */
/* the clip path (note the 25px that is the same as margin*/
-webkit-clip-path: polygon(100% 0, 100% 50%, 100% 100%, 0% 100%, 25px 50%, 0% 0%);
clip-path: polygon(100% 0, 100% 50%, 100% 100%, 0% 100%, 25px 50%, 0% 0%);
/* the border (note the 25px in the gradient)*/
border-left:3px solid grey; /* this will push the background and control the thickness of the border*/
background:
linear-gradient(to top right, grey 48%,transparent 50%) top left /25px 50%,
linear-gradient(to bottom right, grey 48%,transparent 50%) bottom left/25px 50%;
background-repeat:no-repeat;
background-color: black;
}
.section:last-of-type {
background-color: red;
color: black;
}
.section:first-of-type {
/* Remove everything from the first element */
clip-path:none;
margin-left:0;
border-left:0;
background:black;
}
.section.two {
background-color: blue;
}
body {
background-color: #333;
}
<div class="container">
<div class="section">section one</div>
<div class="section two">section two</div>
<div class="section">section three</div>
</div>