Как сделать не доходящий до конца border с прозрачностью?

Question

[Chaly95]

Есть пример по которому нужно сделать галерею.


Я не могу сделать border как на примере.
Как сделать чтобы border у элемента был не на всю длину и размывался в конце?

Может кто то делал что то похожее.
Буду очень благодарен за любую помощь.

Answer 1

[Rustam Bainazarov]

Можно так, например, только высота ячеек должна быть одинаковой, если хочется, чтобы кол-во элементов в последней строке было не максимально возможным, от кол-ва столбцов такой способ не зависит:




Если кол-вол элементов всегда будет максимальное в последней строке (полное её заполнение), то хак на :before не нужен, а строки могут быть разной высоты:

Comments

[Chaly95]

Спасибо большое!

Answer 2

[RAX7]

Comments

[Chaly95]

Спасибо большое!

[Rustam Bainazarov]

Пока я там пЕсал, ты уже ответил, LOL.

[RAX7]

Рустам Байназаров, ну зато все подробно распЕсал =)

Answer 3

[Артем Лукьянов]

border по конкретным краям можно сделать при помощи атрибутов border-right, border-left, border-bottom, border-top. Градиент же можно задать при помощи border-image: linear-gradient(...)
Также можешь попробовать через псевдо-элементы.
А вообще, не проще ли сделать такую картинку в графическом редакторе? Или вам такой border для других целей нужен?

Comments

[Chaly95]

Спасибо!
Картинку в графическом редакторе сделать не вариант, так как изображения будут менять в дальнейшем.