No “one solution” for this idea.
One idea:
Pre steps (For option 1 -or- 2):
A - basic header
header - inside container - inside div (flex-wrapper later) - inside → text-wrapper - Add height by padding-top-bottom for the text-wrapper (Another option is by min-height for the header → Less responsive).
B. Basic background-image
For the header add a background image:
Option 1 - TRICK (by SVG)
Add two embed HTML inside flex parent:
Left side (copy-paste)
<style>
svg.trapezoidal-vertical {
position: relative;
bottom: 0;
right: 0;
width: 150px;
height: 100%;
/* set height to pixels if you want angle to change with screen width */
}
</style>
<svg class="trapezoidal-vertical" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"
preserveAspectRatio="none"> <polygon fill="red" points="0,100 100,0 100,100"/> </svg>
Right side (copy-paste)
<style>
svg.trapezoidal-vertical {
position: relative;
bottom: 0;
right: 0;
width: 150px;
height: 100%;
/* set height to pixels if you want angle to change with screen width */
}
</style>
<svg class="trapezoidal-vertical" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"
preserveAspectRatio="none"> <polygon fill="red" points="0,100 0,0 100,0"/> </svg>
Change display to flex ==> done 
** change fill color under fill
** change width:
On mobile → Hide the zig-zag elements:
** Harder to add white stroke (search this under stackoverflow)
Option 2 - By png and background image:
Very Close idea - Use two png images (Cons: Less sharp + harder to change colors over time. Pros: Design freedom).
Tree:
Pre step: Create two images (By photoshop or any other program):
left
right (open left and flip vertical+horizontal):
Add two empty divs (set some width) + bg images:
base class – set image-bg left.png + background-size: 100% width/height + add width for the element (200px for example)
combo – change to right.png:
Related university links:
- Flexbox - Webflow University Documentation
- Background styles - Webflow University Documentation
- Custom code embed - Webflow University Documentation