linear-gradientで六角形の背景

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%;

関連記事