Как расположить переход блоков изображением формата svg?

Question

[Gorzzoth]

МАКЕТ: figma
Столкнулся с проблемой, что никак не могу расположить это svg изображение слева внизу в родительском блоке header-top

Пробовал подобные варианты, но ничего не выходило

.header__bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 228px;
}

Пытался выставлять ширину в 100%, минимальную ширину, но ничего не помогает, как и preserveAspectRatio в самом svg
Важно сохранить 228px высоты, т.к. в мобильной версии это изображение нельзя сужать

Comments

[Ankhena]

Это вообще не img. В разметке ему делать нечего.
Проще всего сделать псевдо, ему нужный размер, положение и фон. И preserveAspectRatio

[Gorzzoth]

Ankhena, а как тогда сделать чтобы при ширине экрана в 1600px он не сжимался, а просто уходил в owerlow hidden, а при большем размере расширялся

[Gorzzoth]

На данный момент этот псевдоэлемент просто сжимается в месиво

[Ankhena]

Gorzzoth, для этого есть простенькое свойство min-width.
Ну либо, даже проще, размер фона поставьте 1600.
Правда, кажется, ваши запросы противоречат друг другу. На счёт фикс высоты и потом про overflow.

Так что, наверное, сначала нужно четко разобраться какого поведения вы ждёте.

Ну и всегда есть media

[Gorzzoth]

Ankhena, в том и проблема, что если задать min width в 1600px, то он не будет занимать всю ширину экрана при большем разрешении, а background size отказывается работать если ширина равна 100% или 100vw как и 1600px, так и с width 100% только теперь он сжимается при менее чем 1600px

[Gorzzoth]

Ankhena, сейчас попробую через медиа, полез делать десктоп полностью забыв за адаптив)

[Ankhena]

Gorzzoth,

если задать min width в 1600px,он не будет занимать всю ширину экрана

Логика не ясна. Скажете 100% - будет.

а background size отказывается работать если ширина равна 100% или 100vw как и 1600px

Звучит очень интересно.

Похоже, вам пора делать пример кода на codepen.io

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

[Gorzzoth]

https://youtu.be/0l4Nsp5L9wk
Ankhena, всё заработало на ура!) Огромное спасибо)

[Gorzzoth]

Ankhena, background size работал, просто размер псевдоэлемента не позволял это увидеть т.к. он был либо слишком маленьким, либо сам растягивался на всю доступную ширину

а background size отказывается работать если ширина равна 100% или 100vw как и 1600px

Answer 1

[Gorzzoth]

Нужно было задать размер в оригинальный элементу, а при его увеличении сделать медиа запрос, где ширина будет равна 100%
https://youtu.be/0l4Nsp5L9wk

.header__top::after{
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;

    min-width: 1600px;
    height: 228px;
    background-image: url(../img/header_bottom.svg);
}

@media (min-width: 1600px) {
    .header__top::after {
        width: 100%;
    }
}