Как элемент с position absolute расположить ниже блока с текстом?

Question

[Никита]

добрый день. почему у меня зеленый элемент выше блока с текстом? хотя элементам задан z-index.
нужно что бы зеленый элемент был ниже блока .card__wrap и не перекрывал его

код

Comments

[Ankhena]

Так уберите z-index: 5 у родителя

[Никита]

Ankhena, joxi.ru/Vm6ZgOeU3PRNXm
мне нужно что бы вот так было)

[wadowad]

Перекройте псевдоэлемент before ещё одним псевдоэлментом after с чёрным фоном.

[Ankhena]

Никита, оригинально. В вашей песочнице псевдо даже не в ту сторону повернут и сам дочерний не поставлен куда надо.

Можно начать так: https://codepen.io/AnnaSummer/pen/LYdGoxP
Дальше вам потребуется js и немножко тригонометрии, чтобы сдвинуть псевдо с градиентом к нужному углу.
Удобно через кастомные свойства.

Альтернатива: нарисовать градиентный фон для родителя, а поверх него дорисовать тоже градиентом черные куски. Можно совместить с псевдо.

Ну или взять из макета SVG.

[Никита]

Ankhena, спасибо