我想創建一個漸變，線條在兩個方向上移動，但角度為 45 度。使用 html 和 css。
我怎樣才能做同樣的事情，但方向相反。
這是我在下面用來生成上面影像的代碼。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.repeating-linear {
background: repeating-linear-gradient(
-45deg,
black 4px,
transparent,
transparent 10px
);
}
</style>
</head>
<body>
<div class="repeating-linear" style="width: 200px;height: 50px; border: 1px solid red;">
</div>
</body>
</html>
uj5u.com熱心網友回復：
所以你想要交叉線，這并不容易通過漸變來實作，但是由于你使用透明度，它可以通過兩個疊加來實作。
將兩個 div 包裹在一個容器內
<div class='container'>
<div class="repeating-linear" />
<div class="repeating-linear inverted" />
</div>
并為他們提供兩個相反方向的梯度
.container {
width: 200px;
height: 50px;
border: 1px solid red;
position: relative;
}
.repeating-linear {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: repeating-linear-gradient(
-45deg,
black 4px,
transparent,
transparent 10px
);
}
.repeating-linear.inverted {
background: repeating-linear-gradient(
45deg,
black 4px,
transparent,
transparent 10px
);
}
代碼筆示例：
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/529546.html
上一篇：如何自動用點填充div