css _시크릿04

줄무늬 배경

HTML

<!-- 가로 -->
1<div class="box01"></div>
2<div class="box02"></div>
3<div class="box03"></div>
4<div class="box04"></div>

<!-- 세로 -->
5<div class="box05"></div>

<!-- 대각선 -->
6<div class="box06"></div>
7<div class="box07"></div>
8<div class="box08"></div>

9<div class="box09"></div>
10<div class="box10"></div>
11<div class="box11"></div>

12<div class="box12"></div>

CSS

/* 가로 */
.box01{margin:3%;width:200px;height:80px;
background:linear-gradient(#fb3 30%, #58a 70%);
}
.box02{margin:3%;width:200px;height:80px;
background:linear-gradient(#fb3 50%, #58a 50%);
background-size:100% 80px
}
.box03{margin:3%;width:200px;height:80px;
background:linear-gradient(#fb3 30%, #58a 30%);
background-size:100% 30px
}
.box04{margin:3%;width:200px;height:80px;
background:linear-gradient(#fb3 33.3%, #58a 0, #58a 66.6%, yellowgreen 0);
background-size:100% 45px
}

/* 세로 */
.box05{margin:3%;width:200px;height:80px;
background:linear-gradient(to right,/*혹은 90deg*/ #fb3 50%, #58a 0);
background-size:30px 100%
}
.box06{margin:3%;width:200px;height:80px;
background:linear-gradient(45deg, #fb3 50%, #58a 0);
background-size:30px 30px
}
.box07{margin:3%;width:200px;height:80px;
background:linear-gradient(45deg, #fb3 50%, #58a 0);
background-size:30px 30px
}
.box08{margin:3%;width:200px;height:80px;
background:linear-gradient(45deg, #fb3 25%, #58a 0, #58a 50%, #fb3 0, #fb3 75%, #58a 0);
background-size:42px 42px
}

.box09{margin:3%;width:200px;height:80px;
background:repeating-linear-gradient(45deg, #fb3, #fb3 15px, #58a 0, #58a 30px);
}
.box10{margin:3%;width:200px;height:80px;
background:repeating-linear-gradient(60deg, #fb3, #fb3 15px, #58a 0, #58a 30px);
}
.box11{margin:3%;width:200px;height:80px;
background:repeating-linear-gradient(45deg, #fb3, #fb3 25%, #58a 0, #58a 50%);
background-size:42px 42px
}

.box12{margin:3%;width:200px;height:80px;
background:#58a;
background-image:repeating-linear-gradient(30deg, hsla(0,0%,100%,.1),
hsla(0,0%,100%,.1) 15px, transparent 0, transparent 30px);
}