Как сверстать такой блок?

Question

[Joulence]

При вёрстке появился вопрос, как можно сверстать эту секцию? Больше интересует как расположить картинку

<header>
            <div class="container">
                <nav>
                    <div class="nav-button">
                        <button>Sign up</button>
                    </div>
                </nav>
                <div class="nav-background">
                    <img src="img/header/fruits.png" alt="fruits">
                </div>
                <div class="header__text">
                    <h1 class="header__text-title">
                        There is no Sincerer<br>
                        Love than the <span>love<br>
                            of food</span>.
                    </h1>
                    <h2 class="header__text-subtitle">
                        Lorem ipsum dolor sit amet, consectetur adipiscing.
                    </h2>
                    <div class="header__text-button">
                        <a href="#">Place an Order</a>
                    </div>
                </div>
            </div>
        </header>

header {
    height: 874px;
    background: #f4f5f7;
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 68%, 0% 100%);
    clip-path: polygon(0 0, 100% 0, 100% 68%, 0% 100%)
}

header nav {
    padding-top: 47px
}

header nav .nav-button {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: end;
    z-index: 1
}

header nav .nav-button button {
    cursor: pointer;
    font-size: 19px;
    font-weight: 700;
    color: #fff;
    border: none;
    background: #6ece0f;
    width: 115px;
    height: 44px;
    border-radius: 10px;
    -webkit-transition: all;
    transition: all
}

header nav .nav-button button:hover {
    background: #30e31b
}

.nav-background {
    position: absolute;
    top: 0;
    right: 0;
    height: 1000px;
    z-index: -1
}

.header__text-title {
    line-height: 2
}

.header__text-title span {
    color: #5fb709
}

.header__text-subtitle {
    color: #313131;
    font-size: 21px;
    margin-bottom: 50px
}

.header__text-button a {
    text-decoration: none;
    background: #5fb709;
    color: #fff;
    padding: 15px 15px;
    border-radius: 5px;
    font-size: 25px
}

Comments

[Сергей Сергей]

под рукоятью щипцов очень мало тени, смотрится ненатурально, перефотать/подрисовать.

[Ankhena]

Больше интересует как расположить картинку

Вариантов полно: хоть просто bg и bg position. Если удобнее псевдоэлементом, то псевдоэлементом и абсолютом.
Но в разметке она лишняя. Да еще и в div завернутая. Это же не контент.

[Pavstyuk]

Не понятно с какой сложностью вы сталкиваетесь? Просто с отсутствием понимания или что-то работает не так, как хочется?

Если первое то, просто изучите множество примеров, как верстают hero блок другие разработчики. Выберите подходящий для вас.

Если второй вариант проблемы, то не хватает данных в вопросе.

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

[Joulence]

Pavstyuk, первое фото - блок, что надо сделать, второе фото - картинка из макета, которую надо разместить также само. Моя проблема в том, что не могу расположить картинку также, как на макете, она обрезается из-за clip-path

Answer 1

[mills]

Обычно дизайнера рисуют картинки подобные.
А так, я думаю что главный блок нужно обвернуть в position: relative; а блок с картинкой в position: absolute; ну и блок с картинкой расположить куда надо top:0; right:0;

Главному блоку можно задать overflow: hidden;