简体   繁体   中英

How to give angle to the lines in the background using css linear gradient

I wanted to design a pattern of mesh but with angles in the background like the photo i attached. but it didn't work. pls help me resolving this problem. this is image of what i want

here is my code

        .stripped {
        height: 500px;
        opacity: 0.8;
        background-image: linear-gradient(to top,#ababab 2px, transparent 2px), linear-gradient(to right, #ababab 2px, rgb(161, 8, 8) 2px);
        background-size: 100px 100px;
    }

You can rotate the element about the x axis and set a perspective value (where the observer is standing).

 .container { transform-style: preserve-3d; perspective: 800px; }.stripped { height: 500px; opacity: 0.8; background-image: linear-gradient(to top, #ababab 2px, transparent 2px), linear-gradient(to right, #ababab 2px, rgb(161, 8, 8) 2px); background-size: 100px 100px; transform: rotate3d(1, 0, 0, 45deg); }
 <div class="container"> <div class="stripped"></div> </div>

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM