Как сверстать ромбоид с картинкой внутри?

eb1f4fb618a54214967b7160a39bda22.PNG

Я делаю блок с картинкой внутри, блоку добавляю искажение skewY(-20deg), а картинке внутри компенсацию skewY(20deg), но тогда получаются пустые углы внизу и вверху.

Причем у этого блока должен быть border и box-shadow.

Не могу придумать как реализовать, прошу помощи.

Способ с clip-path не подходит, потому что IE 10+.

UPD: Как можно убрать зубы после такой трансформации?
0ae05b3d7d534e82bdd362a2bdda9497.PNG
  • Вопрос задан
  • 629 просмотров
Решения вопроса 1
alexey-m-ukolov
@alexey-m-ukolov Куратор тега CSS
Высота картинки должна быть больше, чем изначальная высота прямоугольника - ведь при искажении он увеличивается. Должно быть что-то приблизительно такое.
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
overflow:hidden;
на контейнере
transform:scale(1.2);/*подобрать коэффициент*/
на картинке
Ответ написан
alexk111
@alexk111
Автор Ботодрома (автоматизация Telegram, VK и др.)
Вот например: codepen.io/anon/pen/RWLyWX
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы