@inefa
Front-End developer

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

Ребят , помогите день ломаю голову над тем как сверстать этот макет60c90078184d6325605070.png

то что я смог придумать
<div class="price__card">
                        <div class="price__card_top">
                            <div class="price__card_title"><h3 class="card__title">高濃度炭酸トリートメント</h3></div>
                            <div class="price__card_shape"></div>
                        </div>
                        <div class="price__card_in"></div>
                    </div>


.price
    width: 100%
    .cont   
        display: flex
        flex-direction: column
        align-items: center
    .price__card
    .price__card_in
        background: yellow
        border-radius: 0 0  5px 5px
        height: 185px
        width: 342px
        box-shadow: 0px 4px 30px rgba(0, 0, 0, 0.12)
    .price__card_top
        height: 35px
        background: white
        display: flex
        justify-content: flex-start
        position: relative
    .price__card_title
        height: 35px
        padding: 23px 15px 0 45px
        background: red
        box-shadow: -10px -4rem 100px rgba(0, 0, 0, 0.12)
    .price__card_shape
        background: green
        width: 73px
        height: 35px
        clip-path: polygon(0 0, 0% 100%, 100% 100%)

    .card__title
        font-weight: 500
        font-size: 12px
        color: white


c моим кодом проблема решается но появляется проблема с тенями.

60c9018db4753172326722.png
  • Вопрос задан
  • 172 просмотра
Решения вопроса 1
RAX7
@RAX7
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы