Rotate a background element slightly

问题

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 worked with it before.

Right now I use the following technique:

.background {
  width:100%;
  margin-left: -160px;
  margin-right: -160px;
  transform: rotate(20deg);
}

and that rotate the elements the opposite direction that they are just horizontal aligned.

But it doesn't really fit my screen when I zoom out or I need to have a lot of negative margins but I don't think that is a nice way of solving this.

Here is a CodePen how things are right now.

Below is how it should look:

The above image is just one tile for sample. Here is how it would actually look in the page. The black stripes are full width of your screen is the idea.

No hover effects are needed on the shape it just needs to be static.

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

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

回答2:

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

来源：https://stackoverflow.com/questions/36280238/rotate-a-background-element-slightly

标签

html

css

css3

svg

css-shapes