HTML
<div class="text-container">
<div class="chart-container">
<div class="lrg-dashed-box">
<div class="lrg-subtext">Build</div>
</div>
<div class="med-dashed-box">
<div class="med-subtext">Hybrid</div>
</div>
<div class="sml-dashed-box">
<div class="sml-subtext">Buy</div>
</div>
<div class="arrow-angled"></div>
<div class="chart-up"></div>
<div class="arrow-up"></div>
<div class="arrow-right"></div>
<div class="mainbox">
<div class="y-axis-subtext">Revenue Generation from Payments</div>
<div class="x-axis-subtext">Risk &<br>Responsibility</div>
<div class="diag-subtext">Customize &<br>Ability to Control the<br>Customer Experience</div>
</div>
</div>
</div>
CSS
body {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
/* Div Container's */
.text-container {
box-sizing: border-box;
padding-top:32px;
width:650px;
height:650px;
background: rgba(255,0,0,0.1);
z-index: -4;
}
.chart-container {
width:500px;
height:500px;
position: relative;
background:white;
z-index: -3;
}
/* Chart Elements */
.mainbox {
margin-top: 20px;
margin-left:7px;
width:471px;
height:471px;
border-left: 2px solid #0a2330;
border-bottom: 2px solid #0a2330;
z-index: -1;
background: rgba(0,255,0,0.1);
position: absolute;
}
.arrow-up {
width: 0;
height: 0;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-bottom: 20px solid #0a2330;
position: absolute;
}
.arrow-right {
width: 0;
height: 0;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
border-left: 20px solid #0a2330;
position: absolute;
bottom: 0;
right: 0;
}
.arrow-angled {
width: 0;
height: 0;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
border-left: 20px solid #f08529;
position: absolute;
bottom: 320px;
left: 320px;
margin-left:7px;
margin-bottom:10px;
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
}
.chart-up {
width: 460px;
position: absolute;
bottom: 0;
left: 0;
margin-left:7px;
margin-bottom:7px;
border-top: 2px dashed #f08529;
transform: rotate(-45deg);
transform-origin: top left;
}
.lrg-dashed-box {
position: absolute;
border: 2px dashed grey;
width: 300px;
height: 300px;
bottom: 0;
left: 0;
margin-left:7px;
margin-bottom:7px;
z-index: -2;
}
.med-dashed-box {
position: absolute;
border: 2px dashed grey;
width: 220px;
height: 220px;
bottom: 0;
left: 0;
margin-left:7px;
margin-bottom:7px;
z-index: -2;
}
.sml-dashed-box {
position: absolute;
border: 2px dashed grey;
width: 30px;
height: 30px;
bottom: 0;
left: 0;
margin-left:7px;
margin-bottom:7px;
z-index: -2;
}
/* Text Style */
.y-axis-subtext {
color: #0a2330;
position: absolute;
top: -52px;
padding: 6px 0px;
}
.x-axis-subtext {
color: #0a2330;
position: absolute;
right: -146px;
bottom: -25px;
padding: 6px 12px;
}
.diag-subtext {
text-align: right;
font-style: italic;
color: #0a2330;
position: absolute;
top: 60px;
right: 20px;
padding: 6px 12px;
}
.lrg-subtext {
border-radius: 6px;
color: white;
position: absolute;
right: -31px;
bottom: -41px;
padding: 6px 12px;
background-color: #0a2330;
}
.med-subtext {
border-radius: 6px;
color: white;
position:absolute;
right:-36px;
bottom:-41px;
padding: 6px 12px;
background-color: #0a2330;
}
.sml-subtext {
border-radius: 6px;
color: white;
position:absolute;
right:-27px;
bottom:-41px;
padding: 6px 12px;
background-color: #0a2330;
}
