Уголок с права сверху бокса, как сделать, чтоб он шел не на всю длину бокса?

Question

[Tanya]

Добрый день! Столкнулась с такой проблемой, есть дизайн и там сверху на уголке бокса должен быть угол, вот такой

пробовала бордер и через градиент вышла фигня какая-то, через тень что-то похожее получается, но если с боку еще можно как-то высоту отрегулировать на топе она идет тупо по всей ширине бокса и никак обрезать ее не могу(можно ли вообще?).
Я видела в интернете только пару примеров с уголками, но они идут с двух сторон всегда и когда брала на подправку кода, то все равно выходит не так как надо, слишком длинное и вообще все равно вылазит с той или иной стороны.

.box1{
box-shadow: 20px -14px 0px 0px rgba(50, 50, 50, 0.75);
}

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

подскажите пожалуйста какие еще варианты есть? можно ли уменьшить широту тени? если да то как? спасибо!

Answer 1

[ⓒⓢⓢ]

если есть свободный псевдоэлемент, то поставьте абсолютом с бордером топ\право

Comments

[Tanya]

так себе вариант, на мобилках будет не очень смотреться

[ⓒⓢⓢ]

Tanya, интересно узнать, что с мобилками?)

[Tanya]

JRK_DV, не так поняла вас просто сначала, теперь стало ясно как оно, извиняюсь)