Как я могу создать градиент на прямоугольном div с повторяющимися линиями под углом 45 градусов в противоположных направлениях?
Я хочу создать градиент с линиями, движущимися в обоих направлениях, но под углом 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>
Итак, в основном вы хотите «перекрестный» шаблон, линии, идущие под углом 45 градусов, пересекаются с линиями, идущими под углом -45 градусов? Затем добавьте второй градиент.
@JiaSH Привет, да, у меня был дубликат этого кода, но с противоположным направлением угла, как вы предлагаете, но в этом случае рассматривается только последний градиент. и да, я хочу, чтобы градиент был 45 градусов, а второй - 45 градусов.
Ответы 1
Итак, вам нужны перекрестные линии, вы можете сложить градиенты, как показано ниже:
<div class='repeating-linear' />
.repeating-linear{
width: 200px;
height: 50px;
border: 1px solid red;
background:
repeating-linear-gradient(
-45deg,
black 4px,
transparent,
transparent 10px
),
repeating-linear-gradient(
45deg,
black 4px,
transparent,
transparent 10px
);
}
Пример jsfiddle: https://jsfiddle.net/4rL7n8xo/
результат:
@T.Joseph, вам не нужен другой элемент для каждого градиента. Вы можете складывать градиенты: jsfiddle.net/4rL7n8xo
Решение в комментарии выше лучше моего :)
Вы пытались изменить -45 градусов на 45 градусов?