1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

XF 1.4 Re-creating 45° corner using css

Discussion in 'Styling and Customization Questions' started by Enguerran A, Aug 23, 2014.

  1. Enguerran A

    Enguerran A Well-Known Member

    Hello,

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

    Code:
    #content .pageContent {
    background: #fff; /* if the rest doesn't work */
        background:
            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.
    [​IMG]

    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 =)
     

Share This Page