How to split page background with vertical polyline? - html

Question

I found how to split page with vertical line - see jsfiddle:
The code is below -
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;
}
Now I would like to replace vertical line with polyline to get something like this:
How can I do it with CSS?
P.S. I can not use background image, since polyline can be different (the points will have different coordinates).

Answer 1

You can consider multiple background to achieve this but it may be tricky to find the different values depending on the shape. It's basically a combination of triangle shape and rectangle shape above each other to create the final layer (changing the colors will help you identify each one)
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>
You can also consider clip-path within a pseudo element and it will be easier (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>