Обратный повторяющийся линейный градиент

Я использую этот кусок кода для создания несколько пунктирной границы:

CSS

.strip {
    height: 5px;
    width: 80px;
    background: repeating-linear-gradient(90deg, transparent, transparent 10px, #ffaacd 5px, #ffaacd 30px);
}

Я пытаюсь поменять цвета переключением transparent а также #ffaacd и их соответствующие длины, но это не работает. Я бы получил прямую розовую линию.

Заметка

Обратите внимание, что я не могу использовать border потому что это влияет на какой-то макет, поэтому я бы предпочел просто использовать фон.

редактировать

Я создал скрипку, чтобы проиллюстрировать, чего я пытаюсь достичь.

По сути, я делаю легенду в некоторой форме, и сейчас полоса начинается с прозрачного цвета, но я хочу, чтобы она начиналась с розового цвета, чтобы она была выровнена по полосе над ней.

Источник

3 ответа

Решение

Ваши смещения длины немного странные. Если вы хотите жестких остановок, вы должны иметь оба #ffaacd и transparent разделы имеют цветную остановку в 10px.

Это работает, если вы измените его на:

background: repeating-linear-gradient(90deg, transparent, transparent 20px, #ffaacd 20px, #ffaacd 30px);

Это дает вам transparent раздел для 20px, а затем #ffaacd раздел для 10px. Это противоположность оригиналу.

Смотрите этот JSFiddle для рабочего примера.

Источник

Для получения обратного рисунка вы должны поменять только цвета, а не длины. Длины значений цветовой остановки должны быть в последовательном порядке, если меньшее следует за большим (например, ...transparent 10px, #ffaacd 5px... в вашем фрагменте) позднее значение ограничивается прежним (например, 10px в вашем случае).

Некоторое доказательство вариации концепции со сторонами:

.strip {
  background: repeating-linear-gradient(to right, transparent, transparent 1%, #ffaacd 1%, #ffaacd 6%), repeating-linear-gradient(to bottom, transparent, transparent 1%, #ffaacd 1%, #ffaacd 6%), repeating-linear-gradient(to right, transparent, transparent 1%, #ffaacd 1%, #ffaacd 6%), repeating-linear-gradient(to bottom, transparent, transparent 1%, #ffaacd 1%, #ffaacd 6%);
  background-size: 1000px 5px, 5px 1000px, 1000px 5px, 5px 1000px;
  background-repeat: repeat-x, repeat-y, repeat-x, repeat-y;
  background-position: top center, center right, bottom center, center left;
}

.strip-inv {
  background: repeating-linear-gradient(to right, #ffaacd, #ffaacd 1%, transparent 1%, transparent 6%), repeating-linear-gradient(to bottom, #ffaacd, #ffaacd 1%, transparent 1%, transparent 6%), repeating-linear-gradient(to right, #ffaacd, #ffaacd 1%, transparent 1%, transparent 6%), repeating-linear-gradient(to bottom, #ffaacd, #ffaacd 1%, transparent 1%, transparent 6%);
  background-size: 1000px 5px, 5px 1000px, 1000px 5px, 5px 1000px;
  background-repeat: repeat-x, repeat-y, repeat-x, repeat-y;
  background-position: top center, center right, bottom center, center left;
}
<textarea class="strip">resize me</textarea> <textarea class="strip-inv">resize me</textarea>

Источник

Даже если это не то, о чем вы прямо просили, я предлагаю вам использовать контур CSS, поскольку он делает именно то, что вам нужно (пунктирная граница, которая не влияет на макет) и намного проще:

.elem {
  width: 200px;
  height: 200px;
  outline: 2px dotted hotpink;
}
<div class="elem"></div>

Источник
Другие вопросы по тегам