Как сверстать декоративный svg элемент?

Question

[Андрей]

Добрый день! Помогите с версткой декоративного элемента. Ссылка на codepen: https://codepen.io/eniluck/pen/wLKjOX

Описание:
Есть svg картинка, которая должна встать декоративным элементом после основного фона снизу родительского блока. Проблема появляется при масштабировании в браузере. ( Нажимаем ctrl и крутим колесико. )

Сделал gif'ку для понимания: eniluck.ru/2019-06-14_10-45-17.gif

Comments

[Rustam Bainazarov]

Ну поставьте её тоже фоном. У вас фон fixed, что ли, поэтому не масштабируется вместе с элементом?

[Андрей]

Рустам Байназаров, Фон в примере был реализован псевдоэлементом ::after c position: absolute по отношению к родителю.
Тобой предложенную реализацию сделал под номером три в codpen. И та же история, изменяем масштаб и появляется полоска ( ссылка: https://codepen.io/eniluck/pen/wLKjOX ).
p.s. Я уже если честно думаю svg перерисовать и добавить туда полоску в 2 пикселя снизу...... %)

[Rustam Bainazarov]

Андрей, ссылку на код нужно было бы сразу делать, хорошо, что люди ответили.

[Андрей]

Рустам Байназаров, Там первая строка в вопросе :)

Answer 1

[Антон Усачев]

Я обычно в таких случаях хитростью беру...

.test2::after {
    bottom: -2px;
}

Comments

[Андрей]

А svg картинка была из макета взята.... Как с не соответствием в 2 пикселя? Перерисовывать svg и добавить туда 2 пикселя?

[Антон Усачев]

Андрей, да. Обычно пользователям незачем скейлить страницу, а те, кому приходится, готовы к тому, что отображение некоторых элементов будут отличаться от задумки. Поэтому, если подобные требования есть, я либо сам добавляю эти пиксели, либо прошу дизайнера исходников их добавить. Ничего страшного в этом нет.
Родителю не забудь выставить overflow: hidden.

[Антон Усачев]

Андрей, нашел еще один изящный вариант, о котором раньше не знал.

.test2::after {
    -webkit-transform: scale(1.000001);
    transform: scale(1.000001);
}

[Андрей]

Антон Усачев, Спасибо! Если будет подходить - то буду его реализовывать первым. Сейчас реализовал сдвигом на 2 пикселя и 2 пикселя подрисовал картинке :)