Rotate a background element slightly

Question

I have created a lay-out where the background element is slightly rotated to the upper-left.

But however I saw something you can do it with SVG but never actually wo

Answer 1

It is very simple to create this with SVG. Just use a path element (or a polygon element), create a shape similar to the required one and then place it absolutely with respect to the parent container. To position it behind the text, give it a negative z-index.

The SVG path commands are pretty easy to understand and can be interpreted as follows:

• M0,0 - This means "move" the imaginary pen to the point 0,0 on the canvas.
• L100,10 - This means draw a "line" from the previous point to the point 100,10 on the canvas.
• 100,100 - Similar to the above one (a L is assumed to be in front).
• 0,90 - Similar to the above again.
• z - This means "close the path". That is, draw a line from the previous point to starting point.

You can read more about the SVG path commands in this MDN tutorial. It is very helpful.

.rotate-background {
  position: relative;
  height: 300px;
  width: 100%;
  overflow: hidden;
  border: 1px solid red;
}
.rotate-background svg {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0px;
  left: 0px;
  z-index: -1;
}
p {
  width: 500px;
  color: white;
  margin: 50px auto;
}

  
  
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quae cum magnifice primo dici viderentur, considerata minus probabantur. Quae hic rei publicae vulnera inponebat, eadem ille sanabat. Duo Reges: constructio interrete. Illa videamus,

---

We can do this with CSS transform: skewY() and pseudo-element also like in the below snippet.

.rotate-background {
  position: relative;
  height: 300px;
  width: 100%;
}

.rotate-background:after {
  position: absolute;
  content: '';
  height: 100%;
  width: 100%;
  top: 0px;
  left: 0px;
  background-color: black;
  transform: skewY(2deg);
  transform-origin: left top;
  backface-visibility: hidden;
  z-index: -1;
}
p {
  position: absolute;
  top: 0px;
  left: 50%;
  width: 500px;
  color:white;
  margin-top: 50px;
  transform: translateX(-50%);
}

  
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quae cum magnifice primo dici viderentur, considerata minus probabantur. Quae hic rei publicae vulnera inponebat, eadem ille sanabat. Duo Reges: constructio interrete. Illa videamus,