Fixed Scale Chart
HTML
<div id="wrap">
<div id="outer">
<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>
</div>
</div>
CSS
#wrap {
position: relative;
width: 650px;
height: 600px;
}
#outer {
position: relative;
width: 650px;
height: 600px;
-webkit-transform-origin: top left;
}
/* Div Container's */
.text-container {
box-sizing: border-box;
padding-top:32px;
width:650px;
height:600px;
}
.chart-container {
width:500px;
height:500px;
position: relative;
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;
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;
}
JAVASCRIPT
var maxWidth = $('#outer').width();
var maxHeight = $('#outer').height();
$(window).resize(function(evt) {
var $window = $(window);
var width = $window.width();
var height = $window.height();
var scale;
// early exit
if(width >= maxWidth && height >= maxHeight) {
$('#outer').css({'-webkit-transform': ''});
$('#wrap').css({ width: '', height: '' });
return;
}
scale = Math.min(width/maxWidth, height/maxHeight);
$('#outer').css({'-webkit-transform': 'scale(' + scale + ')'});
$('#wrap').css({ width: maxWidth * scale, height: maxHeight * scale });
});
