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