你可以试试:
HTML:
<div class="deg45 stripes">TEST</div>
CSS3:
.stripes {
height: 250px;
width: 375px;
-webkit-background-size: 50px 50px;
-moz-background-size: 50px 50px;
background-size: 50px 50px;
}
.deg45 {
background-color: white;
background-image: -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.25, gray), color-stop(.25, transparent), color-stop(.5, transparent), color-stop(.5, gray), color-stop(.75, gray), color-stop(.75, transparent), to(transparent));
background-image: -webkit-linear-gradient(-45deg, gray 25%, transparent 25%, transparent 50%, gray 50%, gray 75%, transparent 75%, transparent);
background-image: -moz-linear-gradient(-45deg, gray 25%, transparent 25%, transparent 50%, gray 50%, gray 75%, transparent 75%, transparent);
background-image: -ms-linear-gradient(-45deg, gray 25%, transparent 25%, transparent 50%, gray 50%, gray 75%, transparent 75%, transparent);
background-image: -o-linear-gradient(-45deg, gray 25%, transparent 25%, transparent 50%, gray 50%, gray 75%, transparent 75%, transparent);
background-image: linear-gradient(-45deg, gray 25%, transparent 25%, transparent 50%, gray 50%, gray 75%, transparent 75%, transparent);
}
FIDDLE http://jsfiddle.net/fGykt/
您可以根据需要对其进行自定义,如下所示:
-45deg
是您希望条纹具有的角度大小,gray
它们的颜色。还带有background-size
你可以定义它们的大小