正六角形敷き詰め背景の作り方
@縦線を引く
body{
height:86.6px;
background-size:50px 86.6px;
background-color:#fc0;
background-image:
linear-gradient(90deg,#fff 4%,transparent 4%,transparent 50%,#fff 50%,#fff 54%,transparent 50%);
background-position:0 0;}
Aマスキング帯(オレンジ)を重ねて、1：2の割合で縦線を隠すbody{
height:86.6px;
background-size:50px 86.6px;
background-color:#fc0;
background-image:
linear-gradient(60deg,#f60,#f60 25%,transparent 25%,transparent 41.7%,#f60 41.7%,#f60 75%,transparent 75%,transparent 91.7%,#00f 91.7%),
linear-gradient(90deg,#fff 4%,transparent 4%,transparent 50%,#fff 50%,#fff 54%,transparent 50%);
background-position:-1px 0,-1px 0;}
B斜めの白線を書き加えるbody{
height:86.6px;
background-size:50px 86.6px;
background-color:#fc0;
background-image:
linear-gradient(30deg,transparent 86.5%,#fff 86.5%,#fff 88.5%,transparent 88.5%),
linear-gradient(-30deg,transparent 86.5%,#fff 86.5%,#fff 88.5%,transparent 88.5%),
linear-gradient(30deg,transparent 86.5%,#fff 86.5%,#fff 88.5%,transparent 88.5%),
linear-gradient(-30deg,transparent 86.5%,#fff 86.5%,#fff 88.5%,transparent 88.5%),
linear-gradient(60deg,#f60,#f60 25%,transparent 25%,transparent 41.7%,#f60 41.7%,#f60 75%,transparent 75%,transparent 91.7%,#00f 91.7%),
linear-gradient(90deg,#fff 4%,transparent 4%,transparent 50%,#fff 50%,#fff 54%,transparent 50%);
background-position:0 0,0 0,25px 43.3px,25px 43.3px,-1px 0,-1px 0;}
緑の部分はなくても同じなので完成品では省略してます。
マスキング帯はわかりやすいよう、オレンジ色でしましたが、実際は背景と同色でやってください。
《マスキング帯の幅について》
マスキング帯(オレンジ)は水平から60度傾いていて、background-size(横50px、縦86.6px)毎に2本の割合で引かれています。
左下から右上に向かって見ると、オレンジ→黄色→オレンジ→黄色となっており、その比はオレンジ2：黄色1：オレンジ2：黄色1となります。
正六角形の1辺の長さを2aとすると、オレンジの幅は2a、黄色の幅はa。
(黄色の幅の部分には30度、60度、90度の三角形(辺の比が1：2：ルート3になる)を二つくっつけたような二等辺三角形があるので。)
以下、この長方形(background-size)の左下を0%、右上を100%とし、何%の所でオレンジと黄色を切り替えれば良いのか考えます。
先述のオレンジ2：黄色1：オレンジ2：黄色1により、オレンジの幅は
2/6 × 100 ≒ 33.3 (%)
となります。
ですが、オレンジは0%より前の所から始まっているので、33.3%まで引くと六角の下に伸びる縦線を必要以上に消してしまいます(下図)。この縦線は幅を二等分する場所にあるので、対角線(50%の位置)の半分(25%)までオレンジを引けば、ちょうど良くなります。25%の所からオレンジが終わり黄色が始まると、黄色(幅1/6)が終わるのは
( 25/100 ＋ 1/6 ) × 100
＝ 41.66…
≒ 41.7 (%)
同様に、更に2/6進んだ所でオレンジ→黄色に切り替えます。
( 25/100 ＋ 1/6 ＋ 2/6) × 100
＝( 25/100 ＋ 3/6) × 100
＝ 75 (%)
これで歪みが少ない六角形敷き詰め画像がでしました。ただし、pxや%を0.1の単位まで反映してくれるブラウザがどれだけあるか、また、反映されなかった場合の表示がどうなるのかは謎です。
→完成品はこちら
TOP≫SUB≫CSS≫幾何学≫正六角形≫作り方