正方形渐变的多个实例
如何重复平方渐变？
在提供的代码中，我以8种不同的方式绘制了方形渐变。
若要能够重复方形渐变，我将使用这些代码中的哪一个？
将如何完成？
https://jsfiddle.net/7s468kwg/
这是1个正方形，我如何让此正方形重复多次？
这就是我正在尝试做的。
重复如下：
.container {
display: flex;
flex-wrap: wrap;
justify-content: center;
margin: auto;
width: 530px;
height: 530px;
}
.box1 {
height: 170px;
width: 170px;
margin: 0 5px 5px 0;
background:
linear-gradient(teal, teal) center / 10px 10px no-repeat,
linear-gradient(black, black) center / 20px 20px no-repeat,
linear-gradient(orange, orange) center / 30px 30px no-repeat,
linear-gradient(black, black) center / 40px 40px no-repeat,
linear-gradient(teal, teal) center / 50px 50px no-repeat,
linear-gradient(black, black) center / 60px 60px no-repeat,
linear-gradient(orange, orange) center / 70px 70px no-repeat,
linear-gradient(black, black) center / 80px 80px no-repeat,
linear-gradient(teal, teal) center / 90px 90px no-repeat,
linear-gradient(black, black) center / 100px 100px no-repeat,
linear-gradient(orange, orange) center / 110px 110px no-repeat,
linear-gradient(black, black) center / 120px 120px no-repeat,
linear-gradient(teal, teal) center / 130px 130px no-repeat,
linear-gradient(black, black) center / 140px 140px no-repeat,
linear-gradient(orange, orange) center / 150px 150px no-repeat,
linear-gradient(black, black) center / 160px 160px no-repeat,
linear-gradient(teal, teal) center / 170px 170px no-repeat;
background-repeat: no-repeat;
}
.box2 {
width: 170px;
height: 170px;
margin: 0 5px 5px 5px;
box-shadow:
inset 0 0 0 5px teal, inset 0 0 0 10px black,
inset 0 0 0 15px orange, inset 0 0 0 20px black, inset 0 0 0 25px teal,
inset 0 0 0 30px black, inset 0 0 0 35px orange, inset 0 0 0 40px black,
inset 0 0 0 45px teal, inset 0 0 0 50px black, inset 0 0 0 55px orange,
inset 0 0 0 60px black, inset 0 0 0 65px teal, inset 0 0 0 70px black,
inset 0 0 0 75px orange, inset 0 0 0 80px black, inset 0 0 0 85px teal;
}
.box3 {
width: 170px;
height: 170px;
margin: 0 0 5px 5px;
box-shadow:
inset 0 0 0 5px teal, inset 0 0 0 10px black,
inset 0 0 0 15px orange, inset 0 0 0 20px black, inset 0 0 0 25px teal,
inset 0 0 0 30px black, inset 0 0 0 35px orange, inset 0 0 0 40px black,
inset 0 0 0 45px teal, inset 0 0 0 50px black, inset 0 0 0 55px orange,
inset 0 0 0 60px black, inset 0 0 0 65px teal, inset 0 0 0 70px black,
inset 0 0 0 75px orange, inset 0 0 0 80px black, inset 0 0 0 85px teal;
}
.box4 {
height: 170px;
width: 170px;
margin: 5px 5px 5px 0;
background: repeating-linear-gradient(teal 0 5px, black 0 10px, orange 0 15px, black 0 20px);
background-size: 100% 50%;
}
.box4::before {
content: "";
display: block;
padding-top: 100%;
background: inherit;
clip-path: polygon(0 0, 100% 0, 0 100%, 100% 100%);
transform: rotate(90deg);
}
.box5 {
height: 170px;
width: 170px;
margin: 5px 5px 5px 5px;
background:
repeating-linear-gradient(0deg, teal 0 5px, black 0 10px, orange 0 15px, black 0 20px) top,
repeating-linear-gradient(180deg, teal 0 5px, black 0 10px, orange 0 15px, black 0 20px) bottom;
background-size: 100% 50%;
background-repeat: no-repeat;
}
.box5::before {
content: "";
display: block;
padding-top: 100%;
background: inherit;
clip-path: polygon(0 0, 100% 0, 0 100%, 100% 100%);
transform: rotate(90deg);
}
.box6 {
width: 170px;
height: 170px;
margin: 5px 0 0 5px;
}
.box7 {
width: 170px;
height: 170px;
margin: 5px 5px 0 0;
}
.color1 {
border: 5px solid teal;
}
.color2 {
border: 5px solid black;
}
.color3 {
border: 5px solid orange;
}
.color4 {
border: 5px solid black;
}
.color5 {
border: 5px solid teal;
}
.color6 {
border: 5px solid black;
}
.color7 {
border: 5px solid orange;
}
.color8 {
border: 5px solid black;
}
.color9 {
border: 5px solid teal;
}
.color10 {
border: 5px solid black;
}
.color11 {
border: 5px solid orange;
}
.color12 {
border: 5px solid black;
}
.color13 {
border: 5px solid teal;
}
.color14 {
border: 5px solid black;
}
.color15 {
border: 5px solid orange;
}
.color16 {
border: 5px solid black;
}
.color17 {
border: 5px solid teal;
}
.box8 {
width: 0;
margin: 90px 90px 90px 90px;
box-shadow:
0 0 0 5px teal, 0 0 0 10px black, 0 0 0 15px orange,
0 0 0 20px black, 0 0 0 25px teal, 0 0 0 30px black, 0 0 0 35px orange,
0 0 0 40px black, 0 0 0 45px teal, 0 0 0 50px black, 0 0 0 55px orange,
0 0 0 60px black, 0 0 0 65px teal, 0 0 0 70px black, 0 0 0 75px orange,
0 0 0 80px black, 0 0 0 85px teal;
}<div class="container">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
<div class="box5"></div>
<svg class="box6" width="170" height="170" viewBox="0 0 170 170">
<rect x="0" y="0" width="170" height="170" fill="teal" />
<rect x="5" y="5" width="160" height="160" fill="black" />
<rect x="10" y="10" width="150" height="150" fill="orange" />
<rect x="15" y="15" width="140" height="140" fill="black" />
<rect x="20" y="20" width="130" height="130" fill="teal" />
<rect x="25" y="25" width="120" height="120" fill="black" />
<rect x="30" y="30" width="110" height="110" fill="orange" />
<rect x="35" y="35" width="100" height="100" fill="black" />
<rect x="40" y="40" width="90" height="90" fill="teal" />
<rect x="45" y="45" width="80" height="80" fill="black" />
<rect x="50" y="50" width="70" height="70" fill="orange" />
<rect x="55" y="55" width="60" height="60" fill="black" />
<rect x="60" y="60" width="50" height="50" fill="teal" />
<rect x="65" y="65" width="40" height="40" fill="black" />
<rect x="70" y="70" width="30" height="30" fill="orange" />
<rect x="75" y="75" width="20" height="20" fill="black" />
<rect x="80" y="80" width="10" height="10" fill="teal" />
</svg>
<div class="box7">
<div class="color1">
<div class="color2">
<div class="color3">
<div class="color4">
<div class="color5">
<div class="color6">
<div class="color7">
<div class="color8">
<div class="color9">
<div class="color10">
<div class="color11">
<div class="color12">
<div class="color13">
<div class="color14">
<div class="color15">
<div class="color16">
<div class="color17">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="box8"></div>
</div>解决方案
将svg用作background-image可能是最佳方式。
background-repeat。默认值为repeat(请参阅代码段CSS中的注释)。
我建议将SVG分离到它自己的文件，并使用该文件的URL。
还可以在CSS中以内联方式使用它，如下所示：
.container {
display: flex;
flex-wrap: wrap;
justify-content: center;
margin: auto;
width: 530px;
height: 530px;
}
.bg-repeating-squares {
/* Repeat a background image both vertically and horizontally (this is default): */
background-repeat: repeat;
/* Repeat a background image only vertically: */
/*background-repeat: repeat-y;*/
/* Repeat a background image only horizontally: */
/*background-repeat: repeat-x;*/
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='175' height='175' viewBox='0 0 175 175'><rect x='0' y='0' width='5' height='175' fill='white'/> <rect x= '0' y= '0' width= '175' height= '5' fill= 'white' /> <rect x= '5' y= '5' width= '170' height= '170' fill= 'teal' /> <rect x= '10' y= '10' width= '160' height= '160' fill= 'black' /> <rect x= '15' y= '15' width= '150' height= '150' fill= 'orange' /> <rect x= '20' y= '20' width= '140' height= '140' fill= 'black' /> <rect x= '25' y= '25' width= '130' height= '130' fill= 'teal' /> <rect x= '30' y= '30' width= '120' height= '120' fill= 'black' /> <rect x= '35' y= '35' width= '110' height= '110' fill= 'orange' /> <rect x= '40' y= '40' width= '100' height= '100' fill= 'black' /> <rect x= '45' y= '45' width= '90' height= '90' fill= 'teal' /> <rect x= '50' y= '50' width= '80' height= '80' fill= 'black' /> <rect x= '55' y= '55' width= '70' height= '70' fill= 'orange' /> <rect x= '60' y= '60' width= '60' height= '60' fill= 'black' /> <rect x= '65' y= '65' width= '50' height= '50' fill= 'teal' /> <rect x= '70' y= '70' width= '40' height= '40' fill= 'black' /> <rect x= '75' y= '75' width= '30' height= '30' fill= 'orange' /> <rect x= '80' y= '80' width= '20' height= '20' fill= 'black' /> <rect x= '85' y= '85' width= '10' height= '10' fill= 'teal' /> </svg> ");
}<div class="container bg-repeating-squares"></div>(我确实更改了您的图形，将5px的白色添加到顶部，并留下来说明您使用的5px页边距)
<svg width="175" height="175" viewBox="0 0 175 175">
<rect x="0" y="0" width="5" height="175" fill="white"/>
<rect x="0" y="0" width="175" height="5" fill="white"/>
<rect x="5" y="5" width="170" height="170" fill="teal"/>
<rect x="10" y="10" width="160" height="160" fill="black"/>
<rect x="15" y="15" width="150" height="150" fill="orange"/>
<rect x="20" y="20" width="140" height="140" fill="black"/>
<rect x="25" y="25" width="130" height="130" fill="teal"/>
<rect x="30" y="30" width="120" height="120" fill="black"/>
<rect x="35" y="35" width="110" height="110" fill="orange"/>
<rect x="40" y="40" width="100" height="100" fill="black"/>
<rect x="45" y="45" width="90" height="90" fill="teal"/>
<rect x="50" y="50" width="80" height="80" fill="black"/>
<rect x="55" y="55" width="70" height="70" fill="orange"/>
<rect x="60" y="60" width="60" height="60" fill="black"/>
<rect x="65" y="65" width="50" height="50" fill="teal"/>
<rect x="70" y="70" width="40" height="40" fill="black"/>
<rect x="75" y="75" width="30" height="30" fill="orange"/>
<rect x="80" y="80" width="20" height="20" fill="black"/>
<rect x="85" y="85" width="10" height="10" fill="teal"/>
</svg>
相关文章