正六角形【css】
body{/*正六角形を敷き詰めた背景*/
background-color:#fff;
background-size:52px 90px;
background-image:
linear-gradient(150deg,#fc0 12px,#fff 12px,#fff 14px,transparent 0),
linear-gradient(-30deg,#fc0 12px,#fff 12px,#fff 14px,transparent 0),
linear-gradient(30deg,#fc0 12px,#fff 12px,#fff 14px,transparent 0),
linear-gradient(-150deg,#fc0 12px,#fff 12px,#fff 14px,transparent 0),
linear-gradient(30deg,#fc0 12px,#fff 12px,#fff 14px,transparent 0),
linear-gradient(-150deg,#fc0 12px,#fff 12px,#fff 14px,transparent 0),
linear-gradient(150deg,#fc0 12px,#fff 12px,#fff 14px,transparent 0),
linear-gradient(-30deg,#fc0 12px,#fff 12px,#fff 14px,transparent 0),
linear-gradient(149deg,#fc0 26px,transparent 0),
linear-gradient(-31deg,#fc0 26px,transparent 0px),
linear-gradient(149deg,#fc0 26px,transparent 0),
linear-gradient(-31deg,#fc0 26px,transparent 0);
background-position:0 0,26px 15px,26px 15px,0 0,0 60px,26px 45px,26px 45px,0 60px,1px 15px,-1px 45px,27px 60px,25px 0;}
適宜必要なプロパティを追加してください
線が綺麗になるよう大幅に変更しました(以前のは
こちら)。また、pxが小数にならないようサイズ調整しました。(2023.12.25)