css div加横线,css3: 如何给一个div添加一个条纹背景（水平，垂直，斜的）

今天是我们前端小团队第二题：

Paste_Image.png

如何给一个div添加一个条纹背景(水平，垂直，斜的)？

答案：

.patterns {

width: 200px;

height: 200px;

float: left;

margin: 10px;

box-shadow: 0 1px 8px #666;

}

.pt1 {

background-size: 50px 50px;

background-color: #0ae;

background-image: -webkit-linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);

background-image: linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);

}

.pt2 {

background-size: 50px 50px;

background-color: #0ae;

background-image: -webkit-linear-gradient(to right, rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);

background-image: linear-gradient(to right, rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);

}

.pt3 {

background-size: 50px 50px;

background-color: #0ae;

background-image: -webkit-linear-gradient(-45deg,

rgba(255, 255, 255, .2) 25%,

transparent 25%,

transparent 50%,

rgba(255, 255, 255, .2) 50%,

rgba(255, 255, 255, .2) 75%,

transparent 75%,

transparent);

background-image: linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent);

}

暂时只想到了这一种，如果还有更好的答案请留言