HTML-CSS: как избавиться от контура при трансформации блока?

#html #css #transform

Задача - сверстать кроссбраузерно вот такого вида слайдер. Применяю трансформацию
+ псевдоэлементы. Вроде бы, всё просто, но откуда-то появляется контур блока-обёртки:



.wrapper {
  width: 250px;
  height: 180px;
  margin: 50px;
  border-radius: 30px 20px;
  transform: skew(10deg, 5deg);
  position: relative;
  overflow: hidden;
}
.img {
  width: 150%;
  transform: translate(-20px, -20px) skew(-10deg, -5deg);
}
.wrapper:before {
  content: '';
  position: absolute;
  left: 220px;
  display: block;
  width: 60px;
  height: 200px;
  border-radius: 20px;
  background-color: white;
  transform: skew(-20deg, -10deg);
  z-index: 1;
}

.wrapper:after {
  content: '';
  position: absolute;
  top: 160px;
  display: block;
  width: 250px;
  height: 60px;
  border-radius: 20px;
  background-color: white;
  transform: skew(-20deg, -10deg);
}
.arrow {
  position: absolute;
  width: 30px;
  height: 40px;
  background-color: red;
  z-index: 2;
  top: 135px;
  left: 180px;
  color: white;
  transform: rotate(45deg) skew(0, 0);
  border-radius: 5px;
  cursor: pointer;
}
.arrow div {
  font-weight: bold;
  padding: 10px 0 0 7px;
  transform: rotate(-45deg);
}

  
  
>>






Что это за контур и как от него избавиться?

И, возможно, есть какой-то другой способ кроссбраузерно сверстать такой слайдер?
    

Ответы

Ответ 1

Добавляем картинке translateZ(0) и больше нет никаких контуров:



.wrapper {
  width: 250px;
  height: 180px;
  margin: 50px;
  border-radius: 30px 20px;
  transform: skew(10deg, 5deg);
  position: relative;
  overflow: hidden;
}
.img {
  width: 150%;
  transform: translate(-20px, -20px) skew(-10deg, -5deg) translateZ(0);
}
.wrapper:before {
  content: '';
  position: absolute;
  left: 220px;
  display: block;
  width: 60px;
  height: 200px;
  border-radius: 20px;
  background-color: white;
  transform: skew(-20deg, -10deg);
  z-index: 1;
}

.wrapper:after {
  content: '';
  position: absolute;
  top: 160px;
  display: block;
  width: 250px;
  height: 60px;
  border-radius: 20px;
  background-color: white;
  transform: skew(-20deg, -10deg);
}
.arrow {
  position: absolute;
  width: 30px;
  height: 40px;
  background-color: red;
  z-index: 2;
  top: 135px;
  left: 180px;
  color: white;
  transform: rotate(45deg) skew(0, 0);
  border-radius: 5px;
  cursor: pointer;
}
.arrow div {
  font-weight: bold;
  padding: 10px 0 0 7px;
  transform: rotate(-45deg);
}

  
  
>>