Как захватить два нижних угла в border-image-slice?

Я пытаюсь добавить градиент в качестве нижней границы заголовка моего сайта, используя CSS для изображения границы. Градиент должен заполнить 100% ширины поперек.

Я могу заставить градиент заполнить большую часть нижней границы с помощью border-image-width и border-image-slice, но по какой-то причине он исключает два нижних угла как пустое пространство. Как я могу заставить градиент охватить ВСЕ дно в одном потоке?

Я попытался полностью удалить border-image-slice, и это заполняет два нижних угла, но опускает остальную часть нижней границы.

{
    border-image-width: 0 0 10px 0 auto;
    -moz-border-image: -moz-linear-gradient(to right, #3acfd5 0%, #3a4ed5 100%);
    -webkit-border-image: -webkit-linear-gradient(to right, #3acfd5 0%, #3a4ed5 100%);
    border-image: linear-gradient(to right, #3acfd5 0%, #3a4ed5 100%);
    border-image-slice: 0 0 1 0;
}

Кажется, что при установке для ширины изображения границы и среза границы изображения значения «0 0 X 0» должно отображаться только дно. Хорошо до сих пор. Тем не менее, это также удаляет два нижних угла, поэтому остается пара пикселей белого пространства, препятствующего переходу градиента от одного края сайта к другому. Как ни странно, когда я полностью удаляю нижний фрагмент изображения, с градиентом отображаются только два нижних угла. Мне нужно, чтобы градиент начинался с нижнего левого угла и проходил через нижний правый нижний угол.


css border-image
person wmwm    schedule 21.07.2019    source источник

Ответы (1)


arrow_upward
1
arrow_downward

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

.box {
  height: 50px;
  border-bottom:10px solid transparent;
  background:
   linear-gradient(to right, #3acfd5 0%, #3a4ed5 100%) bottom/100% 10px border-box no-repeat,
   red;
}
<div class="box"></div>

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

Связано с тем, чтобы лучше понять логику border-image-slice: border-image-slice для изображения градиентной границы

person Temani Afif    schedule 21.07.2019
comment
Спасибо! Это сработало очень хорошо. В коде, который я использовал ранее, были учтены параметры -moz и -webkit. Есть ли что-нибудь, что я должен добавить в этот код, чтобы сделать его более универсальным для разных браузеров? Еще раз спасибо! - person wmwm; 21.07.2019
comment
@wmwm нет, вам больше не нужны префиксы поставщиков для градиента. Кода, который я сделал, достаточно, и он будет работать во всех браузерах. - person Temani Afif; 21.07.2019