如何使用 ZC7A62​​8CBA22E28EB17B5F5C6AE2A266AZ 线性渐变为背景中的线条赋予角度

Question

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;
    }

Answer 1

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>