正六角形(旧)【css】
body{/*正六角形を敷き詰めた背景*/
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,#fc0,#fc0 25%,transparent 25%,transparent 41.7%,#fc0 41.7%,#fc0 75%,transparent 75%,transparent),
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;}
正六角形の一辺の長さと最長の対角線と向かい合う辺の距離の比は
1：2：ルート3（約 1：2：1.732）です。
background-sizeを横50px、縦86.6pxにしたので対角線の長さは約100pxです。この三直線で30度、60度、90度の直角三角形になっています。
白線の太さは全て2pxです。
マスキング帯の41.7%について詳しく知りたい方は
正六角形敷き詰め背景の作り方をご覧ください。
この正六角形は線の交点に不要なギザギザが出るので新バージョン作りました。