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

Question

[Николай Марченко]

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

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

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

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

UPD: Как можно убрать зубы после такой трансформации?

Comments

[A K]

Какой версии ИЕ?

[Николай Марченко]

Symphony: с десятой

[Алексей Зуев]

Чтобы убрать зубы на картинке - гуглите примерно такое

Answer 1

[Алексей Уколов]

Высота картинки должна быть больше, чем изначальная высота прямоугольника - ведь при искажении он увеличивается. Должно быть что-то приблизительно такое.

Comments

[Николай Марченко]

есть какая-нибудь очевидная формула, как рассчитать размер картинки, зная размер блока?

[Алексей Уколов]

Николай Марченко: Ну конечно :)

Высота_картинки = ОкруглитьВверх(Ширина_блока * sin(Угол_искажения)) + Высота_блока_до_манипуляций

Ширина_блока * sin(Угол_искажения) - это длина катета прямоугольного треугольника, который вырезается из верхней части прямоугольника и подставляется снизу. То есть то самое число, на которое увеличивается высота. Ну а округляем вверх мы для того, чтобы из-за нецелого числа в углу не оказался-таки пустой пиксель.

[Алексей Зуев]

Алексей Уколов: может тангенс угла?

[Алексей Уколов]

Да, конечно, я ошибся.

[Алексей Уколов]

Ну а сдвиг картинки это

ОкруглитьВверх(Ширина_блока * tg(Угол_искажения) / 2) * -1

[Николай Марченко]

понял, попробую экспериментально воспроизвести на своих размерах

[Николай Марченко]

Алексей Уколов: Спасибо, получилось. А может вы подскажете как можно брать зубы на картинке? (я приложил к вопросу вверху).

Answer 2

[Дмитрий Кравченко]

overflow:hidden;
на контейнере
transform:scale(1.2);/*подобрать коэффициент*/
на картинке

Comments

[Николай Марченко]

но тогда мылится картинка внутри

Answer 3

[Алекс К]

Вот например: codepen.io/anon/pen/RWLyWX