我如何画下面这张图片的弧线？

Question

我不会在我的网站上制作一些这样的弧线而且我不知道该怎么做我试着这样做但我不能！

参考图像

Answer 1

您可以在其中一个块上使用before / after伪元素。然后在该元素上，您将为其指定相同的背景颜色，并使用transform: skew(-2deg);为其提供倾斜效果。

请参阅下面的示例，一旦您了解了如何使用伪元素，它就非常简单。

＆＃13;

＆＃13;

section {
  position: relative;
  float: left;
  width: 100%;
  background: black;
  height: 300px;
}

.skewedSection {
  background: red;
}

.normalSection:before {
  content: "";
  background: red;
  height: 100px;
  -webkit-transform: skewY(-2deg);
  transform: skewY(-2deg);
  position: absolute;
  left: 0;
  right: 0;
  bottom: -50px;
  z-index: 2;

}

＆＃13;

<section class='normalSection'>
</section>

<section class='skewedSection'>
</section>

＆＃13;

＆＃13;

＆＃13;