rectangle

Problem: Pseudo element's shadow is in front of its elements

HTML

<div class="rectangle">
    <p>Lorem Ipsum</p>
    <a href="#" style="color:#FFFFFF">Lorem Ipsum</a>
</div>

CSS

.rectangle {
        display: inherit;
        position: absolute;
        min-width: 200px;
        max-width: 400px;
        height: 98px;
        background-color: #D90030;
        z-index: 1;
        box-shadow: 3px 3px 5px 0px rgba(0, 0, 0, 0.75);
    }

    .rectangle:before {
        content: " ";
        position: absolute;
        left: 100%;
        border-left: 30px solid #D90030;
        border-top: 49px solid transparent;
        border-bottom: 49px solid transparent;
        filter: drop-shadow(3px 3px 5px rgba(0, 0, 0, 0.75));
    }

    .rectangle * {
        margin: 20px 0 10px 20px;
    }

    .rectangle p {
        font-size: 23px;
        color: white;
    }