形背景

Question

我想在我的网站上制作一些背景形状......

this is the look that I want

我尝试使用旋转/倾斜矩形的方法，当我在下面的部分只有一种颜色时（因为我可以对形状使用相同的颜色），它工作得很完美。如果我想使用附加图像中的纹理，我将最终得到this，具体取决于我使用的方法。我也尝试使用svg来制作形状，但我不确定它是否是最好的解决方案。我想知道是否有一种聪明的方法来做到这一点。我意识到也许我不是应该如此清楚，但是感谢您抽出时间阅读本文。

Answer 1

您可能希望尝试使用SVG和蒙版，具体取决于您的形状的复杂程度。你可以在这里找到一些很好的指导：https://www.sitepoint.com/masking-in-the-browser-with-css-and-svg/。

Illustrator可以保存为SVG，但如果您使用Sketch，它就更容易了！您会注意到代码输出各个坐标。

你可以在这里看到一个不错的演示：http://cssplant.com/clip-path-generator

Answer 2

这是一个概念。尝试自我工作项目。

＆＃13;

＆＃13;

* {
  margin: 0;
  padding: 0;
}
.wrapper {
  width: 100vw;
  padding-top: 50%;
  position: relative;
  background-image: linear-gradient(90deg, rgba(0, 0, 0, .5) 66.6666667%, rgba(255, 255, 0, .6) 66.6666667%), url(http://beerhold.it/1200/600);
  background-repeat: no-repeat;
  background-size: cover;
  overflow: hidden;
}

.wrapper:nth-child(2) {
  background-image: linear-gradient(90deg, rgba(255, 255, 255, .7) 0, rgba(255, 255, 255, .7) 100%), url(http://beerhold.it/1400/700);
  }

.topleft,
.topright,
.bottomleft,
.bottomright {
  position: absolute;
  top: 0;
  height: 100%;
}
.topleft {
  left: 0;
  top: 40%;
  width: 66.66666667%;
  background-image: linear-gradient(transparent 0, transparent 50%, #fff 50%, #fff);
  transform: skewY(7deg);
}
.topright {
  left: 66.66666667%;
  width: 33.33333334%;
  top: 42.3%;
  background-image: linear-gradient(transparent 0, transparent 50%, #fff 50%, #fff);
  transform: skewY(-10deg);
}

.bottomleft {
  left: 0;
  top: -94%;
  width: 33.33333334%;
  background-image: linear-gradient(180deg, transparent 0, transparent 50%, #fff 50%, #fff );
  transform: skewY(-10deg);
}
.bottomright {
  left: 33.33333334%;
  width: 66.66666667%;
  top: -92%;
  background-image: linear-gradient(180deg, transparent 0, transparent 50%, #fff 50%, #fff);
  transform: skewY(7deg);
}

＆＃13;

<div class="wrapper">
  <div class="topleft"></div>
  <div class="topright"></div>
</div>

<div class="wrapper">
  <div class="topleft"></div>
  <div class="topright"></div>
  <div class="bottomleft"></div>
  <div class="bottomright"></div>
</div>

＆＃13;

＆＃13;

＆＃13;