在我的面包屑中仅显示 before/after 伪选择器之一的奇怪人工制品
Weird artefact showing behind only one of before/after pseudo selector in my breadcrumbs
我正在尝试创建带有箭头分隔符的 3 部分面包屑类型元素。这是一个简单的模型。
第 2 部分和第 3 部分之间出现奇怪的伪像。在这种情况下,第 3 部分的红色背景在第 2 部分的蓝色箭头左侧(稍微)可见,但是第 3 部分不会出现同样的问题2 的背景干扰了第 1 部分的箭头。谢天谢地但很奇怪。对我来说,这也只发生在 Chrome 和 Mac 上(浏览器 window 也没有缩放 in/out)。还没有测试 Windows 等等。关于如何解决这个奇怪的问题有什么建议吗?
第 2 部分和第 3 部分之间出现的奇怪人工制品(红色垂直线)的放大视图:
第 1 部分和第 2 部分之间没有出现这种奇怪的人工制品。
代码笔:
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;
}
我不只是想将 before/after 伪选择器的 right: 属性更改为小于 1 像素,因为这让人感觉很笨拙和错误。
非常感谢!
编辑:我想知道这个问题是否与我的 Mac 显示器的高分辨率有关 - 当我调整 chrome 浏览器 window 的大小时,问题来来去去第 1/2 节或第 1/2 节和第 2/3 节或 none 发生更改。取决于浏览器的大小 window。但奇怪的是,在 Firefox 和 Safari 中,拖动 window 根本不会发生这种情况。
你可以优化代码并考虑在元素上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>
我正在尝试创建带有箭头分隔符的 3 部分面包屑类型元素。这是一个简单的模型。
第 2 部分和第 3 部分之间出现奇怪的伪像。在这种情况下,第 3 部分的红色背景在第 2 部分的蓝色箭头左侧(稍微)可见,但是第 3 部分不会出现同样的问题2 的背景干扰了第 1 部分的箭头。谢天谢地但很奇怪。对我来说,这也只发生在 Chrome 和 Mac 上(浏览器 window 也没有缩放 in/out)。还没有测试 Windows 等等。关于如何解决这个奇怪的问题有什么建议吗?
第 2 部分和第 3 部分之间出现的奇怪人工制品(红色垂直线)的放大视图:
第 1 部分和第 2 部分之间没有出现这种奇怪的人工制品。
代码笔:
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;
}
我不只是想将 before/after 伪选择器的 right: 属性更改为小于 1 像素,因为这让人感觉很笨拙和错误。
非常感谢!
编辑:我想知道这个问题是否与我的 Mac 显示器的高分辨率有关 - 当我调整 chrome 浏览器 window 的大小时,问题来来去去第 1/2 节或第 1/2 节和第 2/3 节或 none 发生更改。取决于浏览器的大小 window。但奇怪的是,在 Firefox 和 Safari 中,拖动 window 根本不会发生这种情况。
你可以优化代码并考虑在元素上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>