Как оформить адаптивную шахматную доску с прозрачными пробелами размером 1 пиксель? - PullRequest
Новая
       35

Как оформить адаптивную шахматную доску с прозрачными пробелами размером 1 пиксель?

0 голосов
/ 07 марта 2019

Я построил это: 

.board {
  .row {
    display: flex;
    flex-direction: row;
    align-content: stretch;
    flex: 1 1 0;

    .cell {
     flex: 1 1 0;
     background: padding-box linear-gradient(280deg, red 0%, dodgerblue 0%, blue 100%);
     border-top: 1px solid transparent;
     border-left: 1px solid transparent;

     &:hover {
       background: padding-box red;
     }

     &::after {
       display: block;
       content: "";
       padding-top: 100%;
     }

     &:first-child {
       border-left: none;
     }
    }

    &:first-child .cell {
       border-top: none;
    }
  }
}

https://jsfiddle.net/b58tfqzw/2/

Он отлично работает в Firefox, но в Chrome и Edge он показывает 2-пиксельный разрыв вместо 1-пиксельного иэто выглядит ужасно.

Почему?И как мне это исправить?

...