稍微旋转背景元素

Question

我创建了一个布局，其中背景元素略微旋转到左上角。

但是我看到了一些你可以用 SVG 做的事情，但之前从未真正使用过它。

现在我使用以下技术：

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

并且将元素旋转到与它们只是水平对齐的相反方向。

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

这是CodePen 现在的情况。

下面是它的外观：

上面的图片只是一个示例。 Here is how it would actually look in the page. 黑色条纹是你屏幕的全宽。

形状不需要hover 效果，它只需要是静态的即可。

Answer 1

使用 SVG 创建它非常简单。只需使用path 元素（或polygon 元素），创建一个与所需形状相似的形状，然后相对于父容器绝对放置它。要将其放在文本后面，请给它一个否定的z-index。

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

• M0,0 - 这意味着将假想的笔“移动”到画布上的 0,0 点。
• L100,10 - 这意味着在画布上从前一点到点 100,10 绘制一条“线”。
• 100,100 - 与上述类似（L 假定在前面）。
• 0,90 - 再次与上述类似。
• z - 这意味着“关闭路径”。即从上一点到起点画一条线。

您可以在this MDN tutorial 中阅读有关 SVG path 命令的更多信息。这是非常有帮助的。

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

---

我们可以使用 CSS transform: skewY() 和伪元素来做到这一点，就像下面的 sn-p 一样。

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

Answer 2

您是否尝试过使用百分比或 em 而不是固定像素边距？

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