麻の葉(斜め)(面)
【css】
body{/*麻の葉(斜め)(面)の背景*/
background-size:60px 104px;
background-position:30px 52px,30px 52px,0 0,0 0,30px 52px,0 0,30px 52px,0 0;
background-image:
linear-gradient(150deg,#fff 15px,transparent 15px,transparent 105px,#cea 105px),
linear-gradient(-150deg,#fff 15px,transparent 15px,transparent 105px,#cea 105px),
linear-gradient(150deg,#fff 15px,transparent 15px,transparent 105px,#cea 105px),
linear-gradient(-150deg,#fff 15px,transparent 15px,transparent 105px,#cea 105px),
linear-gradient(-60deg,#fff 26px,transparent 0),
linear-gradient(-60deg,#fff 26px,transparent 0),
linear-gradient(-120deg,#cea 26px,transparent 0),
linear-gradient(-120deg,#cea 26px,#6b0 0);
}
適宜必要なプロパティを追加してください
背景色#6b0(１箇所)をお好きな色に変えられます。
模様が細かいバージョン【css】
body{/*麻の葉(斜め)(面)(中)の背景*/
background-size:44px 76px;background-position:22px 38px,22px 38px,0 0,0 0,22px 38px,0 0,22px 38px,0 0;
background-image:
linear-gradient(150deg,#fff 10px,transparent 10px,transparent 77px,#cea 77px),
linear-gradient(-150deg,#fff 10px,transparent 10px,transparent 77px,#cea 77px),
linear-gradient(150deg,#fff 10px,transparent 10px,transparent 77px,#cea 77px),
linear-gradient(-150deg,#fff 10px,transparent 10px,transparent 77px,#cea 77px),
linear-gradient(-60deg,#fff 19px,transparent 0),
linear-gradient(-60deg,#fff 19px,transparent 0),
linear-gradient(-120deg,#cea 19px,transparent 0),
linear-gradient(-120deg,#cea 19px,#6b0 0);
}
模様が更に細かいバージョン【css】
body{/*麻の葉(斜め)(面)(小)の背景*/
background-size:30px 52px;
background-position:15px 26px,15px 26px,0 0,0 0,15px 26px,0 0,15px 26px,0 0;
background-image:
linear-gradient(150deg,#fff 7.5px,transparent 7.5px,transparent 52.5px,#cea 52.5px),
linear-gradient(-150deg,#fff 7.5px,transparent 7.5px,transparent 52.5px,#cea 52.5px),
linear-gradient(150deg,#fff 7.5px,transparent 7.5px,transparent 52.5px,#cea 52.5px),
linear-gradient(-150deg,#fff 7.5px,transparent 7.5px,transparent 52.5px,#cea 52.5px),
linear-gradient(-60deg,#fff 13px,transparent 0),
linear-gradient(-60deg,#fff 13px,transparent 0),
linear-gradient(-120deg,#cea 13px,transparent 0),
linear-gradient(-120deg,#cea 13px,#6b0 0);
}
TOP≫SUB≫CSS実験室
＊前←158→次＃