backgoundで複数のlinear-gradientを指定すると、CSSだけで六角形の背景をつくられます。
See the Pen gradient-hexagon by webdev (@webdev-jp-net) on CodePen.light
4分割して線形グラデーションを指定
左上、右上、右下、左下に4分割して、それぞれに線形グラデーションのlinear-gradientを指定しています。
transparent（透過）と$fill（塗りつぶし色）の切替をピッタリ同じ数値にすると境界がシャープになりすぎるため、0.5％ずらしてアンチエイリアスがかかるようにしています。
linear-gradient(120deg, transparent, transparent 36%, $fill 36.5%)
サイズ指定を50％にしたらChromeでスキマができる対策で、background-sizeは0.1％大きめに指定しています。
background-size: 50.1% 50.1%;