Странный артефакт, показывающий только один из псевдо-селекторов до / после в моих сухарях - PullRequest
Новая
       21

Странный артефакт, показывающий только один из псевдо-селекторов до / после в моих сухарях

1 голос
/ 29 апреля 2019

Я пытаюсь создать 3 элемента типа панировочных сухарей с разделителем стрелок.Это простой макет.

Между разделами 2 и 3 показан странный артефакт. В этом случае красный фон раздела 3 виден (слегка) слева от синей стрелки раздела 2, однако тот жепроблема не возникает с фоном раздела 2, мешающим стрелке раздела 1.к счастью, но странно.Для меня это происходит только в Chrome для Mac (окно браузера тоже не увеличено / уменьшено).Не проверял Windows и т. Д. Есть ли предложения о том, как решить эту причудливую проблему?

weird artefact

Увеличенное изображение странного артефакта (красныймежду разделами 2 и 3:

weird artefact zoomed

Между разделами 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;
}

Я не просто хочу изменитьСправа: атрибут псевдоселекторов до / после должен быть менее 1 пикселя, так как это выглядит просто неправильно и неправильно.

Большое спасибо!

Редактировать: Интересно, связана ли проблема свысокое разрешение моего экрана Mac - например, когда я немного изменяю размер окна браузера Chrome, проблема возникает и уходит, и изменения происходят для раздела 1/2 или для обоих разделов 1/2 и 2/3 или вообще без изменений.в зависимости от размера окна браузера.Но, как ни странно, в Firefox и Safari это не происходит при перетаскивании окна вообще.

1 Ответ

1 голос
/ 29 апреля 2019

Вы можете оптимизировать код и рассмотреть 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>
...