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

Have you tried using percentages or em's rather than a fixed pixel margin?

.rotate-background {
  height: 300px;
  width: 120%;
  margin-left: -10%;
  margin-right: -10%;
  margin-bottom: 100px;
  transform: rotate(10deg);
  background-color:black;
}

Answer 2

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

<div class="rotate-background">
  <svg viewBox='0 0 100 100' preserveAspectRatio='none'>
    <path d='M0,0 L100,10 100,100 0,90z' />
  </svg>
  <p>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,</p>
</div>

---

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

<div class="rotate-background">
  <p>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, </p>
</div>