Как я могу создать пунктирную линию из двух цветов: серого и светло-серого?
Я хочу создать пунктирную линию, как на изображении ниже, используя только CSS и HTML с минимальным количеством кода. Процент распределения тире между двумя цветами может варьироваться в зависимости от другой переменной CSS, поэтому я должен иметь возможность установить (процент серого) и (100% — (процент серого)) для светло-серого. Я также хочу иметь возможность устанавливать ширину и высоту тире, а также ширину промежутков между ними.
И сколько бы я ни пытался повторить(), сетку и т. д., я не могу этого добиться.
Я также прочитал эти два, но не смог внести изменения в соответствии со своими потребностями: Как создать пунктирную границу с двумя чередующимися цветами?Градиентная линия с пунктирным узором
Ребята, пожалуйста, помогите мне решить эту задачу?
Я пробовал использовать атрибуты фонового изображения, фонового размера, фонового положения и фонового повторения с комбинацией функций линейного градиента () и повторяющегося линейного градиента (), но мне не удалось использовать их в любой комбинации. с разными значениями.
я ожидаю этого
Ответы 2
Одна из идей состоит в том, чтобы использовать два линейных градиента: один отображает пунктирную линию, другой разделяет процент осветления 70% и накладывает на них режим наложения lighten. Все это можно извлечь как настраиваемое свойство для удобного управления.
.dashed-line {
width: 100%;
height: 6px;
--lighten-percentage: 70%;
--dash-width: 18px;
background-image: repeating-linear-gradient(to right, #ffff 0% 40%, #454f5b 40% 100%), linear-gradient(to right, #0000 0% round(down, var(--lighten-percentage), var(--dash-width)), #bbb round(down, var(--lighten-percentage), var(--dash-width)) 100%);
background-size: var(--dash-width) 100%, 100% 100%;
background-blend-mode: lighten;
}<div class = "dashed-line"></div>Я бы использовал маску и фон. Для демонстрации я использую красный и синий цвета, но вы можете легко изменить их на нужные цвета.
.line {
height: 10px;
/* adjust the 30px to control the size of the dash and the 50% to control the gap */
mask: linear-gradient(90deg,#000 50%,#0000 0) 0/30px;
/* adjust the 70% to control the percentage of red */
background: linear-gradient(90deg,red 70%,blue 0);
}<div class = "line"></div>
@yahya Думаю, это намного чище, чем мое решение! Это также позволяет создавать прозрачные зазоры. Я планировал обновить свое решение, чтобы вместо этого использовать маску, но вчера у меня не было времени. Вместо этого вам следует использовать это решение. При необходимости можно использовать
round(70%,30px), чтобы предотвратить появление красного процента в середине тире. (Хотяround()не поддерживается в старых браузерах.)