稍微旋转背景元素

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

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

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

Answer 2

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

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

M0,0 - 这意味着 "move" 到 canvas.
L100,10 - 这意味着从前一个点到 canvas.
100,100 - 和上面的类似（假设前面有一个L）。
0,90 - 再次与上面类似。
z - 这意味着 "close the path"。即从上一个点到起点画一条线

您可以在 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>

稍微旋转背景元素

Rotate a background element slightly

html

css

svg

css-shapes