Good Way To Map Custom-shaped Html Elements Responsively For A Board Game

My problem is that I haven't figure out how to align the spaces responsively. I've tried using vw/vh's and %s but both break consistency on different view sizes. Can anyone recomme

Solution 1:

What worked fairly simply to make the complex collection of shapes was a repeated SVG element with polygon subelement.

The html:

<svgng-style="{position:'absolute', background:'none', overflow: 'visible'}"><polygonpoints="{{points || '0,0 0,10 10,10 10,0 0,0'}}"stroke="black"fill="{{bgColor}}"></polygon></svg>

Where points is a string generated from a helper function to normalize the view dimensions:

function(points){
    var pointsStr = '';
    points ?
    angular.forEach(points.split(' '), function (point) {
        var x = point.split(',')[0],
            y = point.split(',')[1];
        var hPx = Math.floor(($window.innerWidth / 100) * x),
            vPx = Math.floor(($window.innerHeight / 100) * y);
                pointsStr += hPx +','+vPx+' ';
            }) : null;
        return pointsStr.length > 0 ? pointsStr : null;
}

Which parses the 'poly' property string in a factory object:

1: {color: colors.blue, poly:'13,5 8,5 10,11 12,11 13,5'},
2: {color: colors.yellow, poly:'8,5 4,8 7,13 10,11 8,5'},
3: {color: colors.black, poly:'4,8 1.8,13 5.5,16 7,13 4,8'},
4: {color: colors.red, poly:'1.8,13 0,19 5,19 5.5,16 1.8,13'},
5: {color: 'cool?', poly:'0,19 1,26 5.3,22.5 5,19 0,19'},
6: {color: colors.blue, poly: '1,26 3.5,31, 7,25 5.3,22.5 1,26'},
7: {color: colors.yellow, poly: '3.5,31 9,33 10,26 7,25 3.5,31'},
8: {color: colors.black, poly: '9,33 13,32 12,25.5 10,26 9,33'},
9: {color: 'cool?', poly:'13,32 18,28 15,24 12,25.5 13,32'}

Full board rendering: https://irthos.github.io/cool/#/board