麻の葉
この図形を60度回転させた
麻の葉(斜め)なら半分程度の記述量なので、こだわりがなければそちらの使用をおすすめします。
【css】
body{/*麻の葉模様*/
background-size:104px 120px;
background-position:-1px 0,0 0,0 0,0 60px,0 60px,52px 30px,52px 30px,52px 90px,52px 90px,0 0,0 0,0 1px;
background-image:
linear-gradient(90deg,#800 2px,transparent 2px,transparent 52px,#800 52px,#800 54px,transparent 54px),
linear-gradient(120deg,#eab 14px,#800 14px,#800 16px,transparent 16px,transparent 134px,#800 134px,#800 136px,#eab 136px),
linear-gradient(60deg,#eab 14px,#800 14px,#800 16px,transparent 16px,transparent 134px,#800 134px,#800 136px,#eab 136px),
linear-gradient(120deg,#eab 14px,#800 14px,#800 16px,transparent 16px,transparent 134px,#800 134px,#800 136px,#eab 136px),
linear-gradient(60deg,#eab 14px,#800 14px,#800 16px,transparent 16px,transparent 134px,#800 134px,#800 136px,#eab 136px),
linear-gradient(120deg,#eab 14px,#800 14px,#800 16px,transparent 16px,transparent 134px,#800 134px,#800 136px,#eab 136px),
linear-gradient(60deg,#eab 14px,#800 14px,#800 16px,transparent 16px,transparent 134px,#800 134px,#800 136px,#eab 136px),
linear-gradient(120deg,#eab 14px,#800 14px,#800 16px,transparent 16px,transparent 134px,#800 134px,#800 136px,#eab 136px),
linear-gradient(60deg,#eab 14px,#800 14px,#800 16px,transparent 16px,transparent 134px,#800 134px,#800 136px,#eab 136px),
linear-gradient(30deg,transparent 25px,#800 25px,#800 27px,transparent 27px,transparent 77px,#800 77px,#800 79px,transparent 79px,transparent 129px,#800 129px,#800 131px,transparent 131px),
linear-gradient(150deg,transparent 25px,#800 25px,#800 27px,transparent 27px,transparent 77px,#800 77px,#800 79px,transparent 79px,transparent 129px,#800 129px,#800 131px,transparent 131px),
linear-gradient(0deg,#800 2px,#eab 2px,#eab 30px,#800 30px,#800 32px,#eab 32px,#eab 60px,#800 60px,#800 62px,#eab 62px,#eab 90px,#800 90px,#800 92px,#eab 92px);
}
適宜必要なプロパティを追加してください
模様が細かいバージョン【css】
body{/*麻の葉(小)模様*/
background-size:52px 60px;
background-position:-1px 0,0 0,0 0,0 30px,0 30px,26px 15px,26px 15px,26px 45px,26px 45px,0 0,0 0,0 1px;
background-image:
linear-gradient(90deg,#800 2px,transparent 2px,transparent 26px,#800 26px,#800 28px,transparent 28px),
linear-gradient(120deg,#eab 6.5px,#800 6.5px,#800 8.5px,transparent 8.5px,transparent 66.5px,#800 66.5px,#800 68.5px,#eab 68.5px),
linear-gradient(60deg,#eab 6.5px,#800 6.5px,#800 8.5px,transparent 8.5px,transparent 66.5px,#800 66.5px,#800 68.5px,#eab 68.5px),
linear-gradient(120deg,#eab 6.5px,#800 6.5px,#800 8.5px,transparent 8.5px,transparent 66.5px,#800 66.5px,#800 68.5px,#eab 68.5px),
linear-gradient(60deg,#eab 6.5px,#800 6.5px,#800 8.5px,transparent 8.5px,transparent 66.5px,#800 66.5px,#800 68.5px,#eab 68.5px),
linear-gradient(120deg,#eab 6.5px,#800 6.5px,#800 8.5px,transparent 8.5px,transparent 66.5px,#800 66.5px,#800 68.5px,#eab 68.5px),
linear-gradient(60deg,#eab 6.5px,#800 6.5px,#800 8.5px,transparent 8.5px,transparent 66.5px,#800 66.5px,#800 68.5px,#eab 68.5px),
linear-gradient(120deg,#eab 6.5px,#800 6.5px,#800 8.5px,transparent 8.5px,transparent 66.5px,#800 66.5px,#800 68.5px,#eab 68.5px),
linear-gradient(60deg,#eab 6.5px,#800 6.5px,#800 8.5px,transparent 8.5px,transparent 66.5px,#800 66.5px,#800 68.5px,#eab 68.5px),
linear-gradient(30deg,transparent 12px,#800 12px,#800 14px,transparent 14px,transparent 38px,#800 38px,#800 40px,transparent 40px,transparent 64px,#800 64px,#800 66px,transparent 66px),
linear-gradient(150deg,transparent 12px,#800 12px,#800 14px,transparent 14px,transparent 38px,#800 38px,#800 40px,transparent 40px,transparent 64px,#800 64px,#800 66px,transparent 66px),
linear-gradient(0deg,#800 2px,#eab 2px,#eab 15px,#800 15px,#800 17px,#eab 17px,#eab 30px,#800 30px,#800 32px,#eab 32px,#eab 45px,#800 45px,#800 47px,#eab 47px);
}
