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

Question

[William Miller]

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

то что я смог придумать

<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 моим кодом проблема решается но появляется проблема с тенями.

Comments

[Виталий Першин]

Тень наложите через filter drop-shadow

[Одиночка Айс]

Где ж вы японского заказчика то нашли?)

[kryamk]

чтобы сделать треугольник используйте transform: skew();

Answer 1

[RAX7]

Comments

[William Miller]

Охренеть просто ! До вас еще расти и расти. Спасибо большое

[William Miller]

Патаюсь понять как всё это работает

[RAX7]

William Miller, на хабре есть цикл статей про svg фильтры, после прочтения будет немного понятней.

[William Miller]

RAX7, да , я почитал но нужно попрактивоваться , по поводу этой формы в хроме всё отлично работает но на safari очень коряво выходит , проставил префиксы попытался внести изменения в SVG не помогает , если смогли бы помочь был бы очень признателен дедлайны прижымают))

[RAX7]

William Miller, похоже сафари не хочет рисовать за пределами элемента. Поправил демку в ответе, добавил туда псевдоэлемент для карточки. Проверь помогло?

[William Miller]

RAX7 , Даааа, всё работает спасибо вам большое , я понимаю что брать готовый код и вставлять это некрасиво и не есть хорошо для программиста и так как тема SVG мне не очень понятна , не было времени разбираться тем более осталость 24 часа пришлось прибегнуть к помощи. Спасибо всем! Особенно RAX7

[RAX7]

William Miller, пожалуйста=)