Change/Override z-index of ::after element in CSS

Question

What I want to achieve should look something like this:

My CSS looks like this:

.element {
    position: absolute;
    right: 13vw;
    top: 7vw;
    background-color: #016BA9;
    padding: 5px;
    color: #E6EEF8;
    z-index: 1;
}

.element::after{
    content: "";
    border-top: 100px solid rgb(1, 81, 128);
    border-right: 100px solid transparent;
    bottom: -100px;
    right: 0;
    position: absolute;
    z-index: -1 !important;
}

Now what my problem is: If I set the z-index of the .element class to 1 I cannot override it with z-index: -1 in the pseudo-element.
My workaround was to change the z-index of the carousel to -1, remove the z-index from the element and place a z-index of -2 in the element::after. But then my carousel becomes non-interactable.

Thank you!

Answer 1

Of course, shortly after I wrote this post I found out that in HTML Elements within the same stacking context will place in ascending order. So the last element in the code will show on TOP. I just switched the elements of the carousel and the text-area in the HTML code, so the carousel was displayed first and the text-area on top of it. Then I added a z-index of 0 to the carousel, no z-index to the text-area and a z-index of -1 to the :after-element.