时间戳

首页 > 解决方案 > 伪元素的阴影可以留在它的元素后面吗？

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

问题描述

我遇到的问题是伪元素的阴影 :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:before身后的影子.rectangle。这样的事情可能吗？

标签： htmlcsspseudo-element

解决方案

采用

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

代替

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

见小提琴

.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>

推荐阅读