<style><!-- [et_pb_line_break_holder] -->.angle-top {<!-- [et_pb_line_break_holder] --> width: 100%;<!-- [et_pb_line_break_holder] --> background-color: #000000;<!-- [et_pb_line_break_holder] --> height: 150px;<!-- [et_pb_line_break_holder] --> -webkit-clip-path: polygon(0 10%, 76% 100%, 100% 0, 100% 100%, 0 100%);<!-- [et_pb_line_break_holder] --> clip-path: polygon(0 10%, 76% 100%, 100% 0, 100% 100%, 0 100%);<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --></style><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --><div class="angle-top"></div>
The “Section” settings contains the background image.
The top and bottom rows are custom code modules, each with respective styling code to create the angles. The CSS could easily be extracted to the main site CSS file if it needs to be reused.
The code responds to desktop, tablet and mobile sizes. The CSS heights of the angles may need some media queries for tablet and mobile sizes to maintain aesthetic.
This middle row is a basic 3-column row with text modules. The row expands and contracts properly to fit the contents. The text modules can be swapped for any module.
<style><!-- [et_pb_line_break_holder] -->.angle-bottom {<!-- [et_pb_line_break_holder] --> width: 100%;<!-- [et_pb_line_break_holder] --> background-color: #000000;<!-- [et_pb_line_break_holder] --> height: 100px;<!-- [et_pb_line_break_holder] --> -webkit-clip-path: polygon(0 0, 100% 0, 23% 100%);<!-- [et_pb_line_break_holder] --> clip-path: polygon(0 0, 100% 0, 23% 100%);<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --></style><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --><div class="angle-bottom"></div>
<style><!-- [et_pb_line_break_holder] -->.angle-top {<!-- [et_pb_line_break_holder] --> width: 100%;<!-- [et_pb_line_break_holder] --> background-color: #000000;<!-- [et_pb_line_break_holder] --> height: 150px;<!-- [et_pb_line_break_holder] --> -webkit-clip-path: polygon(0 10%, 76% 100%, 100% 0, 100% 100%, 0 100%);<!-- [et_pb_line_break_holder] --> clip-path: polygon(0 10%, 76% 100%, 100% 0, 100% 100%, 0 100%);<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --></style><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --><div class="angle-top"></div>
This is filler text.
This is filler text.
This is filler text.
<style><!-- [et_pb_line_break_holder] -->.angle-bottom {<!-- [et_pb_line_break_holder] --> width: 100%;<!-- [et_pb_line_break_holder] --> background-color: #000000;<!-- [et_pb_line_break_holder] --> height: 100px;<!-- [et_pb_line_break_holder] --> -webkit-clip-path: polygon(0 0, 100% 0, 23% 100%);<!-- [et_pb_line_break_holder] --> clip-path: polygon(0 0, 100% 0, 23% 100%);<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --></style><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --><div class="angle-bottom"></div>