Как сделать прямой угол у повернутого блока?

Question

[booyokkk]

Есть проблема, по макету нужно повернуть блок на 5 градусов, я написал свойство rotate, получилась такая штука , ширина блоков должна быть 100%, может кто подскажет что сделать чтобы серый блок доходил до края экрана? joxi.ru/GrqzPV1Fq7eKmz

Answer 1

[y0u]

Нарисуйте треугольник

Answer 2

[Александр Зачиналов]

Такие вещи несут много проблем, можно повернуть, растянуть, подрезать чтобы не было скроллов...Но все это весьма не кроссбраузерно. Легче в купе с полифилом сверстать это на SVG, включая текст. Если SEO заругают ))), то можно меню продублировать. Ну или повернуть только блок меню поверх SVG, если поддержка браузерами выше IE9+

Comments

[Александр Зачиналов]

Альтернатива: делаете для всего блока wrapper с width:100%; overflow: hidden и даете фиксированную высоту. Внутри блок по дизайну поворачивайте на 5 градусов, widht около 105-110%, margin-left: -5 или -10%. Должно сработать. Из минусов IE<9 выпадают (либо снова хаки на CSS Transforms), куча вендорных префиксов, фиксированная высота обертки.

Answer 3

[keslo]

Сделайте перпендикулярно линии идущей от вашего центра монитора к центру Земли. Так и проще, и удобнее, и правильнее.