麻の葉(面)
【css】
body{/*麻の葉(面)*/
background-size:104px 120px;background-position:0 0,0 60px,0 60px,0 0,52px 30px,52px 30px,52px 90px,52px 90px,0 0,52px 30px,0 60px,52px 90px,0 0,52px 30px,0 60px,52px 90px;
background-image:
linear-gradient(120deg,#fff 15px,transparent 0,transparent 135px,#bbb 0),
linear-gradient(60deg,#fff 15px,transparent 0,transparent 135px,#bbb 0),
linear-gradient(120deg,#fff 15px,transparent 0,transparent 135px,#bbb 0),
linear-gradient(60deg,#fff 15px,transparent 0,transparent 135px,#bbb 0),
linear-gradient(60deg,#fff 15px,transparent 0,transparent 135px,#bbb 0),
linear-gradient(120deg,#fff 15px,transparent 0,transparent 135px,#bbb 0),
linear-gradient(60deg,#fff 15px,transparent 0,transparent 135px,#bbb 0),
linear-gradient(120deg,#fff 15px,transparent 0,transparent 135px,#bbb 0),
linear-gradient(150deg,#bbb 26px,transparent 0),
linear-gradient(-150deg,#fff 26px,transparent 0),
linear-gradient(150deg,#bbb 26px,transparent 0),
linear-gradient(-150deg,#fff 26px,transparent 0),
linear-gradient(-150deg,#fff 26px,transparent 0),
linear-gradient(150deg,#bbb 26px,transparent 0),
linear-gradient(-150deg,#fff 26px,transparent 0),
linear-gradient(150deg,#bbb 26px,#cde 0);
}
適宜必要なプロパティを追加してください
模様が細かいバージョン【css】
body{/*麻の葉(面)(小)*/
background-size:52px 60px;background-position:0 0,0 30px,0 30px,0 0,26px 15px,26px 15px,26px 45px,26px 45px,0 0,26px 15px,0 30px,26px 45px,0 0,26px 15px,0 30px,26px 45px;
background-image:
linear-gradient(120deg,#fff 10%,transparent 0,transparent 90%,#bbb 0),
linear-gradient(60deg,#fff 10%,transparent 0,transparent 90%,#bbb 0),
linear-gradient(120deg,#fff 10%,transparent 0,transparent 90%,#bbb 0),
linear-gradient(60deg,#fff 10%,transparent 0,transparent 90%,#bbb 0),
linear-gradient(60deg,#fff 10%,transparent 0,transparent 90%,#bbb 0),
linear-gradient(120deg,#fff 10%,transparent 0,transparent 90%,#bbb 0),
linear-gradient(60deg,#fff 10%,transparent 0,transparent 90%,#bbb 0),
linear-gradient(120deg,#fff 10%,transparent 0,transparent 90%,#bbb 0),
linear-gradient(150deg,#bbb 13px,transparent 0),
linear-gradient(-150deg,#fff 13px,transparent 0),
linear-gradient(150deg,#bbb 13px,transparent 0),
linear-gradient(-150deg,#fff 13px,transparent 0),
linear-gradient(-150deg,#fff 13px,transparent 0),
linear-gradient(150deg,#bbb 13px,transparent 0),
linear-gradient(-150deg,#fff 13px,transparent 0),
linear-gradient(150deg,#bbb 13px,#cde 0);
}
