Как сверстать подобные тени?

Question

[Evanre]

Я понимаю что можно использовать before/after с наклоном или выпуклостью и отбрасываением тени, но они не дают точно такого же результата как на макете
st

Comments

[HamSter]

https://paulund.co.uk/learn-how-to-create-differen...

[Evanre]

Я уже писал комментарий под ответом, но автор его удалил. В данный момент именно такой подход и используется. Но проблема в том что по центру тень пропадает, а мне нужно чтобы она оставалась.

Answer 1

[Flying]

Первая - radial gradient от чего-то типа rgba(0,0,0,0.25) до transparent на :after с "запихиванием" половины элемента под основной.

Вторая - :before и :after с тенями, небольшой rotate transform влево / вправо и "запихивание" под основной элемент + видимо ещё :after от какого-нибудь дополнительного элмента чтобы нарисовать центральную часть тени. Правда во втором случае лучше чтобы фон под элементом был однородный, а тени - непрозрачными т.к. иначе будут видимые артефакты в местах их пересечения.

Comments

[Evanre]

radial-gradient не подошел, он просто круглый, а мне нужно было чтобы оно тянулось на всю высоту блока. В итоге сверстал вот так:

&__shadow {
        @include absolute(0, null, 0, 50%);
        display: block;
        overflow: hidden;
        width: 2rem;

        &::after {
           @include absolute(0, null, null, -3rem);
           @include size(3rem, 100%);
           border-radius: 50%;
           box-shadow: 0 0 20px rgba($color-black, 0.5);
           content: '';
           display: block;
        }
    }

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

[Flying]

Evanre почему вдруг radial-gradient() круглый? У него есть параметр shape который может принимать значение ellipse и позволяет получить произвольный эллипс.

По поводу второго: я специально написал "+ видимо ещё :after от какого-нибудь дополнительного элмента чтобы нарисовать центральную часть тени"