将背景元素略微旋转

Question

我已经创建了一个布局，其中背景元素略微向左上方旋转。

但是我发现你可以使用SVG来完成此操作，但我以前从未使用过。

目前我使用以下技术：

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

现在的问题是元素只是水平对齐，而且当我缩小页面或需要使用大量负边距时，它并不适合我的屏幕。但我认为这不是解决问题的好方法。

这里有一个CodePen，展示了当前的情况。

下面是应该呈现的样子：

上面的图片只是一个样本。实际上，在页面中会像这样。黑色条纹的宽度是您屏幕的全宽。

形状不需要任何hover效果，只需保持静态即可。

- Dennis

---

请分享您想要的内容。 - Gaurav Aggarwal

抱歉，我不小心删除了之前的评论。您是在特别寻找SVG答案吗？还是像这个这样的东西可以接受？ - Harry

http://i.imgur.com/YEnO6bi.png 和版本 Version 49.0.2623.87 (64位) 相关的编程内容。 - Dennis

那太好了，我已经很喜欢你的:after解决方案了。 - Dennis

不需要考虑形状，它只需要是静态的。 - Dennis

Answer 1

使用SVG创建这个形状非常简单。只需使用

- Harry

---

哇，看起来很棒，我一定会使用它。对于这样的事情，使用SVG是否更好呢？ - Dennis

@Dennis：一般情况下，对于复杂的形状，推荐使用SVG。但是对于这个比较简单的形状来说，无论是使用CSS还是SVG都可以。 - Harry

Answer 2

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

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

- elmarko