Как правильно сверстать этот блок, что бы треугольник не сливался с box-shadow?

Question

[Геннадий]

Как правильно сверстать этот блок, что бы треугольник не сливался с box-shadow. Если снизу ничего нету он не сливается.
сейчас он такой

надо что бы был такой
https://jsfiddle.net/409v8zcg/

Answer 1

[Виктор Янышев]

Какой такой блок?

Answer 2

[Геннадий]

ссылки не показало (
joxi.ru/a2XK7MBi1DL8xm
jsfiddle.net/409v8zcg

Comments

[Flur]

Код же есть готовый, в чем проблема ? Нельзя его просто скопипастить ?

[Геннадий]

Посмотрите скрин , ссылка там где джокси.
Оно сливается с box-shadow и берет его цвет.

[Виктор Янышев]

Судя по джокси, тупо цвет уголка поменять ?

[Геннадий]

да, у него стоит свой цвет, но он наследует цвет shadow

[Ankhena]

Геннадий: где код, в котором есть и тень и уголок?

[Ankhena]

Геннадий: а все, я поняла. after никак не может унаследовать цвет от тени, это ерунда какая-то.
Просто тень перекрывает уголок и все.
Разберитесь с z-index

[Ankhena]

Геннадий: и треугольник должен быть прямоугольным

[Геннадий]

Ankhena W: с прямоугольным треугольником, хорошая идея) помогло , спасибо)

Answer 3

[Flur]

Есть видеоурок в YT от Soraxa на эту тему. Он там прекрасно всё объясняет :
https://www.youtube.com/watch?v=qcW2WA29Ge8