CODEWITHSUNDEEP
csstransformlinear-gradients
Rida Fatima
Rida Fatima

Reputation: 11

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

Upvotes: 0

Views: 92

Answers (1)

A Haworth
A Haworth

Reputation: 36492

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

UPDATE: the mesh background has been put on a pseudo before element rather than the element itself after a comment saying the actual element was not to rotate.

.container {
  transform-style: preserve-3d;
  perspective: 800px;
}

.stripped {
  height: 500px;
  width: 100vw;
  background: rgba(0, 0, 255, 0.4);
  position: relative;
  transform-style: preserve-3d;
  perspective: 800px;
}

.stripped::before {
  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);
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
<div class="container">
  <div class="stripped"></div>
</div>

Upvotes: 1

Related Questions