麻の葉(斜め)
【css】
body{/*麻の葉(斜め)模様*/
background-size:60px 104px;
background-position:0 1px,0 0,0 0,30px 52px,30px 52px,0 0,0 0,-1px 0;
background-image:
linear-gradient(0deg,#fff 2px,transparent 2px,transparent 52px,#fff 52px,#fff 52px,transparent 52px),
linear-gradient(120deg,transparent 25px,#fff 25px,#fff 27px,transparent 27px,transparent 77px,#fff 77px,#fff 79px,transparent 79px),
linear-gradient(60deg,transparent 25px,#fff 25px,#fff 27px,transparent 27px,transparent 77px,#fff 77px,#fff 79px,transparent 79px),
linear-gradient(150deg,#8ac 14px,#fff 14px,#fff 16px,transparent 16px,transparent 104px,#fff 104px,#fff 106px,#8ac 106px),
linear-gradient(30deg,#8ac 14px,#fff 14px,#fff 16px,transparent 16px,transparent 104px,#fff 104px,#fff 106px,#8ac 106px),
linear-gradient(150deg,#8ac 14px,#fff 14px,#fff 16px,transparent 16px,transparent 104px,#fff 104px,#fff 106px,#8ac 106px),
linear-gradient(30deg,#8ac 14px,#fff 14px,#fff 16px,transparent 16px,transparent 104px,#fff 104px,#fff 106px,#8ac 106px),
linear-gradient(90deg,#fff 2px,#8ac 2px,#8ac 30px,#fff 30px,#fff 32px,#8ac 32px);
}
適宜必要なプロパティを追加してください
模様が細かいバージョン
【css】
body{/*麻の葉(斜め)(中)*/
background-size:44px 76px;
background-position:0 1px,0 0,0 0,22px 38px,22px 38px,0 0,0 0,-1px 0;
background-image:
linear-gradient(0deg,#fff 2px,transparent 2px,transparent 38px,#fff 38px,#fff 40px,transparent 40px),
linear-gradient(120deg,transparent 18px,#fff 18px,#fff 20px,transparent 20px,transparent 56px,#fff 56px,#fff 58px,transparent 58px),
linear-gradient(60deg,transparent 18px,#fff 18px,#fff 20px,transparent 20px,transparent 56px,#fff 56px,#fff 58px,transparent 58px),
linear-gradient(150deg,#8ac 10px,#fff 10px,#fff 12px,transparent 12px,transparent 76px,#fff 76px,#fff 78px,#8ac 78px),
linear-gradient(30deg,#8ac 10px,#fff 10px,#fff 12px,transparent 12px,transparent 76px,#fff 76px,#fff 78px,#8ac 78px),
linear-gradient(150deg,#8ac 10px,#fff 10px,#fff 12px,transparent 12px,transparent 76px,#fff 76px,#fff 78px,#8ac 78px),
linear-gradient(30deg,#8ac 10px,#fff 10px,#fff 12px,transparent 12px,transparent 76px,#fff 76px,#fff 78px,#8ac 78px),
linear-gradient(90deg,#fff 2px,#8ac 2px,#8ac 22px,#fff 22px,#fff 24px,#8ac 24px);
}
模様が更に細かいバージョン
【css】
body{/*麻の葉(斜め)(小)*/
background-size:30px 52px;
background-position:0 1px,0 0,0 0,15px 26px,15px 26px,0 0,0 0,-1px 0;
background-image:
linear-gradient(0deg,#fff 2px,transparent 2px,transparent 26px,#fff 26px,#fff 28px,transparent 28px),
linear-gradient(120deg,transparent 12px,#fff 12px,#fff 14px,transparent 14px,transparent 38px,#fff 38px,#fff 40px,transparent 40px),
linear-gradient(60deg,transparent 12px,#fff 12px,#fff 14px,transparent 14px,transparent 38px,#fff 38px,#fff 40px,transparent 40px),
linear-gradient(150deg,#8ac 6.5px,#fff 6.5px,#fff 8.5px,transparent 8.5px,transparent 51.5px,#fff 51.5px,#fff 53.5px,#8ac 53.5px),
linear-gradient(30deg,#8ac 6.5px,#fff 6.5px,#fff 8.5px,transparent 8.5px,transparent 51.5px,#fff 51.5px,#fff 53.5px,#8ac 53.5px),
linear-gradient(150deg,#8ac 6.5px,#fff 6.5px,#fff 8.5px,transparent 8.5px,transparent 51.5px,#fff 51.5px,#fff 53.5px,#8ac 53.5px),
linear-gradient(30deg,#8ac 6.5px,#fff 6.5px,#fff 8.5px,transparent 8.5px,transparent 51.5px,#fff 51.5px,#fff 53.5px,#8ac 53.5px),
linear-gradient(90deg,#fff 2px,#8ac 2px,#8ac 15px,#fff 15px,#fff 17px,#8ac 17px);
}
TOP≫SUB≫CSS実験室
＊前←156→次＃