HTML-CSS: как избавиться от контура при трансформации блока?
1,00
р.
Задача - сверстать кроссбраузерно вот такого вида слайдер. Применяю трансформацию + псевдоэлементы. Вроде бы, всё просто, но откуда-то появляется контур блока-обёртки:
.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) }
Что это за контур и как от него избавиться?
И, возможно, есть какой-то другой способ кроссбраузерно сверстать такой слайдер?
Ответ
Добавляем картинке 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) }
.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) }
>>
Что это за контур и как от него избавиться?
И, возможно, есть какой-то другой способ кроссбраузерно сверстать такой слайдер?
Ответ
Добавляем картинке 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) }
>>
