html - 稍微旋转背景元素

Question

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

但是我看到了一些可以用 SVG 完成但以前从未真正使用过的东西。

现在我使用以下技术:

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

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

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

这是一个CodePen现在怎么样了。

下面是它的样子:

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

形状不需要悬停效果，它只需要是静态的。

Answer 1

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

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

• M0,0 - 这意味着将假想的笔“移动”到 Canvas 上的点 0,0。
• L100,10 - 这意味着在 Canvas 上从前一点到点 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() 和伪元素来做到这一点，就像下面的代码片段一样。

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