Удалить цвет границы из линейного градиента

У меня проблема с удалением цвета (границы) из перекрывающегося линейного градиента. В IE 11 все работает как положено. В Firefox между градиентами есть небольшая видимая серая линия. Как я могу это удалить?

стрелка показывает проблему

Я пробовал вот так:

.box2 {
  background-image: -webkit-linear-gradient(154deg, red 67%, transparent 33%), -webkit-linear-gradient(26deg, transparent 67%, red 33%);
  background-image: -moz-linear-gradient(154deg, red 67%, transparent 33%), -moz-linear-gradient(26deg, transparent 67%, red 33%);
  background-image: -ms-linear-gradient(154deg, red 67%, transparent 33%), -ms-linear-gradient(26deg, transparent 67%, red 33%);
  background-image: -o-linear-gradient(154deg, red 67%, transparent 33%), -o-linear-gradient(26deg, transparent 67%, red 33%);
  background-image: linear-gradient(154deg, red 67%, transparent 33%), linear-gradient(26deg, transparent 67%, red 33%);
  background-position: 0 0, 100% 0;
  background-repeat: no-repeat;
  background-size: 80% 100%;
  height: 100px;
  width: 100%;
  border: 0;
}

Вот скрипка: https://jsfiddle.net/aam6roaf/


html css cross-browser linear-gradients
person Marco    schedule 01.05.2016    source источник
comment
В моем FF я его не вижу (FF 45.0.2)   -  person Dmitry    schedule 01.05.2016
comment
Дмитрий: очень странно. Я использую ту же FF-версию, но я все еще вижу границу или что-то еще ... какую ОС вы используете? Linux? ПОБЕДИТЬ? Mac?   -  person Marco    schedule 01.05.2016

Ответы (1)


arrow_upward
1
arrow_downward

Я вижу ту же проблему в Firefox v45.0.2 или Windows 10. Хотя я понятия не имею, почему появляется эта строка, она исчезает, когда я устанавливаю точки остановки цвета, как в приведенном ниже фрагменте. Установка ограничителей цвета, как в приведенном ниже фрагменте, также имеет преимущество в создании более плавных угловых градиентов.

Это хорошо работает в Firefox v45.0.2, Chrome (v51.0.2704.19 dev-m), Opera v36, IE11 и Edge.

.box2 {
  background-image: linear-gradient(154deg, red 67%, transparent 67.25%), linear-gradient(26deg, transparent 67%, red 67.25%);
  background-position: 0 0, 100% 0;
  background-repeat: no-repeat;
  background-size: 80% 100%;
  height: 100px;
  width: 100%;
  border: 0;
}
<div class="box2"></div>

person Harry    schedule 01.05.2016
comment
Что ж, работает! Кажется, решение состоит в том, что второе значение (мои 33%) должно быть больше, чем первое значение. Я подтвердил это некоторыми тестовыми значениями. - person Marco; 01.05.2016
comment
Ага @Marco. Он всегда должен быть больше, потому что это, по сути, точки остановки / начала цвета (а не проценты заливки), поэтому второй цвет должен начинаться с точки, где заканчивается первый (или позже), но даже при 67,1% в качестве значения существует крошечные видимые линии границы в FF, которых нет ни в одном другом браузере. Так что, вероятно, это должно быть 67% + дельта. - person Harry; 01.05.2016