html - 伪元素的影子可以留在它的元素后面吗？

Question

我遇到的问题是伪元素 :before 的阴影在它的元素前面。

https://jsfiddle.net/36aqf40y/3/

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

<style>
.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;
    }
</style>

我真的很想在.rectangle 后面有.rectangle:before 的影子。这样的事情可能吗？

Answer 1

使用

filter: drop-shadow(3px 1px 1px rgba(0, 0, 0, 0.75));

代替

filter: drop-shadow(3px 3px 5px rgba(0, 0, 0, 0.75));

See fiddle

.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 {
    top:1px;
    content: " ";
    position: absolute;
    left: 100%;
    border-left: 30px solid #D90030;
    border-top: 49px solid transparent;
    border-bottom: 49px solid transparent;
    filter: drop-shadow(3px 1px 1px rgba(0, 0, 0, 0.75));
    }

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

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

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