CSS-Transform Rotate issue

[patrickbruckner]

Hi folks,

I have a Problem on one of the sites i create:

I want to transform a container over the whole width of the page, but when i do so, the edges of the container on the left and right sides show up. I don’t want this triangles of the background to appear. Also it seems the browser won’t take up the same space in the layout, as described in the Almanac Transform.

So i tried to fix it (Comment in the Pen) – Got rid of the left edge.
The problem with my fix is that the horizontal scrollbar shows up and if you scroll to the right, you will see the triangle still appearing.

http://codepen.io/anon/pen/LsxvJ

I hope you can give me some Advice how to fix this issue.

Thanks Patrick

[Paulie_D]

Only think I can think of is extending the ‘stripe’ with pseudo elements

See: https://css-tricks.com/full-browser-width-bars/

Whether you would need to apply transforms to those, I do not know.

[patrickbruckner]

Doesn’t work for me… Any other solutions for this?

[Author]

Posts