XF 1.4 Re-creating 45° corner using css

Enguerran A

Well-known member

I'm trying to have a straight line as border for the mainContent div and I have some troubles making it working.

#content .pageContent {
background: #fff; /* if the rest doesn't work */
        linear-gradient(135deg, transparent 20px, #fff 0) top left,
        linear-gradient(225deg, transparent 0px, #fff 0) top right,
        linear-gradient(315deg, transparent 0px, #fff 0) bottom right,
        linear-gradient(45deg,  transparent 0px, #fff 0) bottom left;
    background-size: 50% 50%;
    background-repeat: no-repeat;}
At the moment, it works fine on Firefox, (I didn't try on ie) but I have some troubles with Chrome. When I scroll down, there is a weird line in the middle of the screen.

In addition, the angle of the top left corner depends on the height of the page (not the case on Firefox).
What can I do to fix that and get it working for both of them? (firefox and chrome) without sacrificing this design =)