Задать вопрос

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

eb1f4fb618a54214967b7160a39bda22.PNG

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

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

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

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

UPD: Как можно убрать зубы после такой трансформации?
0ae05b3d7d534e82bdd362a2bdda9497.PNG
  • Вопрос задан
  • 632 просмотра
Подписаться 7 Оценить 3 комментария
Ответ пользователя Дмитрий Кравченко К ответам на вопрос (3)
overflow:hidden;
на контейнере
transform:scale(1.2);/*подобрать коэффициент*/
на картинке
Ответ написан