答案 0 :(得分:2)
可以用背景来完成:重复线性渐变
div {height:100px; width:100px; background:repeating-linear-gradient(-45deg,#000,#333 1px,#000 1px);}
答案 1 :(得分:2)
(编辑:我在codepen中添加了第二个例子)
与已经给出的答案类似,但增加了避免渐变:
http://codepen.io/anon/pen/EyNwOq
给它一个重复的线性渐变背景,但为了避免渐变并且只获得两种不同的颜色,请按照以下步骤进行操作(使用设置来调整条纹宽度和颜色):
background: repeating-linear-gradient( -45deg, #000 0px, #000 5px, #333 6px, #333 11px, #000 12px);
答案 2 :(得分:1)
您可以在后台使用linear-gradient
并制作小方框,这样可以轻松更改条纹的宽度(在我的示例中为10px乘以10px),然后形成如下背景:
body {
text-align: center;
}
h4 {
padding-top: 150px;
}
.gradient-box {
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
width: 320px;
height: 320px;
border: none;
font: normal 100%/normal Arial, Helvetica, sans-serif;
color: rgb(255, 255, 255);
-o-text-overflow: clip;
text-overflow: clip;
background: -webkit-linear-gradient(-45deg, rgba(84,84,84,0) 0, rgba(84,84,84,0) 40%, rgba(29,29,29,1) 40%, rgba(0,0,0,1) 59%, rgba(58,58,58,0) 59%, rgba(63,63,63,0) 100%), -webkit-linear-gradient(-45deg, rgba(0,0,0,1) 0, rgba(0,0,0,1) 7%, rgba(79,79,79,0) 7%, rgba(63,63,63,0) 100%), -webkit-linear-gradient(-225deg, rgba(0,0,0,1) 0, rgba(0,0,0,1) 7%, rgba(79,79,79,0) 7%, rgba(63,63,63,0) 100%), rgba(33,29,29,1);
background: -moz-linear-gradient(135deg, rgba(84,84,84,0) 0, rgba(84,84,84,0) 40%, rgba(29,29,29,1) 40%, rgba(0,0,0,1) 59%, rgba(58,58,58,0) 59%, rgba(63,63,63,0) 100%), -moz-linear-gradient(135deg, rgba(0,0,0,1) 0, rgba(0,0,0,1) 7%, rgba(79,79,79,0) 7%, rgba(63,63,63,0) 100%), -moz-linear-gradient(315deg, rgba(0,0,0,1) 0, rgba(0,0,0,1) 7%, rgba(79,79,79,0) 7%, rgba(63,63,63,0) 100%), rgba(33,29,29,1);
background: linear-gradient(135deg, rgba(84,84,84,0) 0, rgba(84,84,84,0) 40%, rgba(29,29,29,1) 40%, rgba(0,0,0,1) 59%, rgba(58,58,58,0) 59%, rgba(63,63,63,0) 100%), linear-gradient(135deg, rgba(0,0,0,1) 0, rgba(0,0,0,1) 7%, rgba(79,79,79,0) 7%, rgba(63,63,63,0) 100%), linear-gradient(315deg, rgba(0,0,0,1) 0, rgba(0,0,0,1) 7%, rgba(79,79,79,0) 7%, rgba(63,63,63,0) 100%), rgba(33,29,29,1);
-webkit-background-origin: padding-box;
background-origin: padding-box;
-webkit-background-clip: border-box;
background-clip: border-box;
-webkit-background-size: 10px 10px;
background-size: 10px 10px;
}
<div class="gradient-box">
<h4>Awesome striped background</h4>
</div>
您应该能够非常轻松地更改background-size
和linear-gradient
颜色以适应您想要达到的目标。