Подскажите люди добрые в какую сторону двигаться, нужно сверстать такое

Question

Подскажите люди добрые в какую сторону двигаться, нужно сверстать такое

как на картинке. Линии сейчас рисую так:

border-image: linear-gradient(to right, #fff 1.5em, #000 1.5em, #000 4em) 100% 1;

Но плохо стыкуется с картинкой. Как рисовать такие линии? Нашел тэг hr но он слабо кастомизируется похоже ((

#frontend #html #javascript #programming #russian

0

08.03.2022

12 ответов

12 просмотров

Oleg M Автор вопроса

Шура Чернова
чем вас обычный бордер не устраивает? а кавычки пс...

в таком решении не понимаю как "обрезать" часть линии, сама картинка должна быть полупрозрачной, поддерживаю лайт / дарк мод

0

08.03.2022

idkfa

Oleg M
в таком решении не понимаю как "обрезать" часть ли...

ширину линии вычти с calc например

0

08.03.2022

Oleg M Автор вопроса

idkfa
ширину линии вычти с calc например

а что значит "вычти с calc" ?

0

08.03.2022

Шура Чернова

Oleg M
а что значит "вычти с calc" ?

если линии нарисовать тоже псевдо-элементами, то через calc можно указать их ширину

0

08.03.2022

idkfa

Шура Чернова
если линии нарисовать тоже псевдо-элементами, то ч...

ага, я бы так и сделал

0

08.03.2022

Шура Чернова

idkfa
ага, я бы так и сделал

для этого просто нужна еще одна обертка) не люблю плодить сущности без необходимости

0

08.03.2022

idkfa

Шура Чернова
для этого просто нужна еще одна обертка) не люблю ...

иногда так проще, и поддерживать удобно вполне, понятно что лишние элементы плодить не хочется

0

08.03.2022

Dmitriy

Обёртку делать флексом, внутри картинку выровнить слева (изначально так и стоит) потом псевдоэлементом делать линию, тогда и картинка и линия будет флекс айтемом. (Если нужно прям заморочиься конечно, я бы просто задний фон сделал чёрным а псевдоэлементом линию абсолютно позиционироваал бы)

0

08.03.2022

Oleg M Автор вопроса

кажется это должно быть просто, но я не допираю как это сделать, особенно ту часть, чтобы линия была на одной оси с моей картинкой. Вот мой хреновый код верхней части с линией: <div id="topwrapper"><topquote></topquote><line></line></div> topquote { content:url('quote-open.svg'); display: inline-block; } line { content: ""; display: inline-block; margin-left: 40px; border-bottom: 1px solid black; width: 100%; } #topwrapper{ text-align:left; }

0

08.03.2022

Oleg M Автор вопроса

Dmitriy
Обёртку делать флексом, внутри картинку выровнить ...

"делать флексом" - это что значит?

0

08.03.2022

Dmitriy

Oleg M
"делать флексом" - это что значит?

За комп сяду скину пример.

0

09.03.2022