Gradient Shapes - Creating color blocks using CSS gradients (with angles) and background-size

Just a begining

Octagon

height: 198px;
width: 198px;
background: 
linear-gradient(-45deg, transparent, transparent 41px, teal 41px, teal) 0px 0px, 
linear-gradient(45deg, olive, olive 41px, transparent 41px, transparent) 140px 0px, 
linear-gradient(45deg, transparent, transparent 41px, green 41px, green) 0px 140px, 
linear-gradient(-45deg, lime, lime 41px, transparent 41px, transparent) 140px 140px, 
linear-gradient(yellow, yellow) 58px 0px, 
linear-gradient(gold, gold) 0px 58px, 
linear-gradient(pink, pink) 58px 140px, 
linear-gradient(salmon, salmon) 140px 58px, 
#222;
background-size: 58px 58px, 58px 58px, 58px 58px, 58px 58px, 82px 58px, 58px 82px, 82px 58px, 58px 82px;
background-repeat: no-repeat;

Please see CSS Image Values and Replaced Content Module Level 3 - 5.1. Linear Gardients