The markup (using Jumpstart shortcode for bootstrap elements and putting over bg image in the builder) substitute

<div class="whatever"> for [html class="whatever"] and </div> for [/html]

.
the html:

[raw]
[column size="5/12" wpautop="false"]
[html class="inner left"]This is an example page. It's different from a blog post because it wil[/html]
[/column]
[column size="1/6" wpautop="true"]
<!--Column 2...-->
[/column]
[column size="5/12" wpautop="false"]
[html class="inner right"]This is an example page. It's different from a blog post because it wil[/html]
[/column]
[column size="5/12" wpautop="false"]
[html class="inner left"]This is an example page. It's different from a blog post because it wil[/html]
[/column]
[column size="1/6" wpautop="true"]
<!--Column 2...-->
[/column]
[column size="5/12" wpautop="false"]
[html class="inner right"]This is an example page. It's different from a blog post because it wil[/html]
[/column]
[/raw]

the css (add bg images for each spoke):

#custom-main > .image-pinwheel {
    background-color: #ffffff;
    background-position: 50% 15%;
}
.image-pinwheel .inner {
	border-top: solid 1px #999999;
	padding: 15px;
	padding-left: 60px;
	position:relative;
	background-position: left 15px;
	background-repeat: no-repeat;
}
.image-pinwheel .inner.left {
	background-image: url('./images/bottom-left-pinwheel.png');
}
.image-pinwheel .row:first-child .inner.left {
	background-image: url('./images/top-left-pinwheel.png');
}
.image-pinwheel .inner.right {
	background-image: url('./images/bottom-right-pinwheel.png');
}
.image-pinwheel .row:first-child .inner.right {
	background-image: url('./images/top-right-pinwheel.png');
}
@media(min-width:768px){
.image-pinwheel .inner {
	width: 80%;
	min-height: 200px;
}
.image-pinwheel .inner.left {
	margin-left: 20px;
	margin-top: 20px;
	float: left;
}
.image-pinwheel .row:first-child .inner.left {
	margin-left: 0;
}
.image-pinwheel .inner.right {
	float: right;
}
.image-pinwheel .row:first-child .inner.right {
	margin-right: 20px;
}
.image-pinwheel .inner:after {
	content: '';
	position: absolute;
	width: 30px;
	height: 1px;
	border-top: solid 1px #999999;
}
.image-pinwheel .row .left.inner:after {
	top: -11px;
	right: -25px;
	transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
}
.image-pinwheel .row:first-child .left.inner:after {
	top: 11px;
	right: -25px;
	transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
}
.image-pinwheel .row .right.inner:after {
	top: -11px;
	left: -25px;
	transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
}
.image-pinwheel .row:first-child .right.inner:after {
	top: 11px;
	left: -25px;
	transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
}
}

Second Option

html:

<div class="new-pinwheel">
[raw]
[column size="1/2" wpautop="false"]
[html class="inner left"]This is an example page. It's different from a blog post because it wil[/html]
[/column]
[column size="1/2" wpautop="false"]
[html class="inner right"]This is an example page. It's different from a blog post because it wil[/html]
[/column]
[html class="spacer"][/html]
[column size="1/2" wpautop="false"]
[html class="inner left"]This is an example page. It's different from a blog post because it wil[/html]
[/column]
[column size="1/2" wpautop="false"]
[html class="inner right"]This is an example page. It's different from a blog post because it wil[/html]
[/column]
[/raw]
</div>

css:

.new-pinwheel {
    background-color: #ffffff;
    background-position: 50% 47%;
	background-image: url('https://narcissistabusesupport.com/wp-content/uploads/2016/06/frontpage-heart-300x262.png');
	background-repeat: no-repeat;
}
.new-pinwheel .inner {
	color: #ffffff;
	padding: 15px;
	padding-left: 60px;
	position:relative;
	background-position: left 15px;
	background-repeat: no-repeat;
}
/* bottom left */
.new-pinwheel .inner.left {
	background-image: url('./images/bottom-left-pinwheel.png');
	background-color: #ffcd00
}
/* top left */
.new-pinwheel .row:first-child .inner.left {
	background-image: url('./images/top-left-pinwheel.png');
	background-color: #4271a1;
}
/* bottom right */
.new-pinwheel .inner.right {
	background-image: url('./images/bottom-right-pinwheel.png');
	background-color: #ff3399;
}
/* top right */
.new-pinwheel .row:first-child .inner.right {
	background-image: url('./images/top-right-pinwheel.png');
	background-color: #97cf00;
}
@media(min-width:768px){
.new-pinwheel .inner {
	width: 65%;
	min-height: 200px;
}
.new-pinwheel .row {
	margin-left: 0;
	margin-right: 0;
}
.new-pinwheel .row > div {
	padding: 0
}
.new-pinwheel .spacer {
	min-height: 100px;
}
/* bottom */
.new-pinwheel .inner {
	float: left;
}
/* top */
.new-pinwheel .row:first-child .inner {
	float: right;
}
/* right */
.new-pinwheel .row .inner.right {
	margin-top: 100px;
}
.new-pinwheel .inner:after {
	content: '';
	position: absolute;
	border-style: solid;
	width: 0;
	height: 0;
}
/* bottom left */
.new-pinwheel .row .left.inner:after {
	top: 0;
	right: -20px;
	border-width: 40px 20px 0 0;
	border-color: #ffcd00 transparent transparent transparent;
}
/* top left */
.new-pinwheel .row:first-child .left.inner:after {
	bottom: -20px;
	top: auto;
	right: 0;
	border-width: 0 40px 20px 0;
	border-color: transparent #4271a1 transparent transparent;
}
/* bottom right */
.new-pinwheel .row .right.inner:after {
	top: -20px;
	left: 0;
	border-width: 20px 0 0 40px;
	border-color: transparent transparent transparent #ff3399;
}
/* top right */
.new-pinwheel .row:first-child .right.inner:after {
	top: auto;
	bottom: 0;
	left: -20px;
	border-width: 0 0 40px 20px;
	border-color: transparent transparent #97cf00 transparent;
}
}