如何用垂直折线分割页面背景？答案

【问题标题】：How to split page background with vertical polyline?如何用垂直折线分割页面背景？
【发布时间】：2019-04-16 17:42:28
【问题描述】：

我found如何用垂直线分割页面 - 见jsfiddle：

代码如下 -

body {
    background-color: white;
}

#background {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 50%;
    height: 100%;
    background-color: black;
    z-index: 1;
}

#content {
    position: relative;
    z-index: 2;
    padding: 30px;
    text-align: center;
    font-weight: bold;
    color: red; 
    font-family: Arial, sans-serif;
}

现在我想用折线代替垂直线来得到这样的东西：

我怎样才能用 CSS 做到这一点？

附：我不能使用背景图片，因为折线可以不同（点会有不同的坐标）。

【问题讨论】：

标签： html css background polyline

【解决方案1】：

您可以考虑使用多个背景来实现此目的，但根据形状找到不同的值可能会很棘手。它基本上是三角形和矩形的组合以创建最后一层（更改颜色将帮助您识别每一层）

body {
  margin:0;
}
.box {
  height:100vh;
  background:
    linear-gradient(to bottom right,#000 49.8%,transparent 50%) 0 0/70% 120%,
    linear-gradient(to top right,#000 49.8%,transparent 50%) 0 0/60% 70%,
    linear-gradient(#000,#000) 0 100%/50% 31%,
    linear-gradient(to bottom right,#000 49.8%,transparent 50%) 55.3% 100%/10% 30.2%;
  background-repeat:no-repeat;
}

<div class="box">

</div>

您也可以在伪元素中考虑clip-path，这样会更容易（https://bennettfeely.com/clippy/）

body {
  margin:0;
}
.box {
  height:100vh;
  position:relative;
}
.box:before {
  content:"";
  position:absolute;
  top:0;
  left:0;
  bottom:0;
  right:20%;
  background:#000;
  -webkit-clip-path: polygon(0 0, 72% 0, 59% 33%, 68% 62%, 47% 100%, 0 100%);
clip-path: polygon(0 0, 72% 0, 59% 33%, 68% 62%, 47% 100%, 0 100%);
}

<div class="box">

</div>

【讨论】：