稍微旋转背景元素 [英] Rotate a background element slightly

问题描述

但是我看到了一些你可以用SVG做到的东西，但是，我已经创建了一个布局，其中背景元素稍微旋转到左上角。从来没有真正使用过它。

现在我使用以下技术：

  .background {
 width：100％; 
 margin-left：-160px; 
 margin-right：-160px; 
 transform：rotate（20deg）; 
} 
  

并且旋转元素的方向相反，它们只是水平对齐。 / p>

但是，当我缩小或缩小时，它不适合我的屏幕，或者我需要大量的负边距，但我认为这不是一个很好的解决方法这是。

以下是

上面的图片只是一个样本。 这是它在页面中的实际效果黑色条纹是屏幕的整个宽度是这样的想法。

不需要 hover 这个形状需要静态效果。

解决方案

使用SVG创建它非常简单。只需使用路径元素（或多边形元素），创建一个类似于所需的形状，然后放置它绝对与父容器有关。将它放在文本后面，给它一个负值 z-index 。

SVG 命令很容易理解，可以解释如下：

• M0,0 - 这意味着将虚拟笔移动到画布上的0,0点。
  
• L100,10 - 这意味着从前一点到画布上的点100,10绘制一条线。


• 100,100 - 与上面类似（假设 L 在前面）。


• 0,90 - 与上述内容类似。
  
• z - 这意味着关闭路径。也就是说，从前一点开始画一条线到出发点。
<此MDN教程中的路径命令。这非常有帮助。


  .rotate-background {position：relative; height：300px;宽度：100％;溢出：隐藏; border：1px solid red;}。rotate-background svg {position：absolute;身高：100％;宽度：100％; top：0px; left：0px; z-index：-1;} p {width：500px;白颜色; margin：50px auto;}  

< div class =旋转背景> < svg viewBox ='0 0 100 100'preserveAspectRatio ='none'> <路径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，contemrata minus probabantur。 Quae hic rei publicae vulnerara inrabat，eadem ille sanabat。 Duo Reges：建设interrete。 Illa videamus，< / p>< / div>

我们可以用CSS transform：skewY（）和伪元素来做到这一点，就像下面的片段一样。





  .rotate-background {position：relative; height：300px; width：100％;}。rotate-background：after {position：absolute;内容：'';身高：100％;宽度：100％; top：0px; left：0px;背景颜色：黑色; transform：skewY（2deg）; transform-origin：左上方; backface-visibility：hidden; z-index：-1;} p {position：absolute; top：0px;剩下：50％;宽度：500px;白颜色; 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，contemrata minus probabantur。 Quae hic rei publicae vulnerara inrabat，eadem ille sanabat。 Duo Reges：建设interrete。 Illa videamus，< / p>< / div>

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.

解决方案

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>

这篇关于稍微旋转背景元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！