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

Question

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

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

Answer 2

只需将 drop-filter 应用于整个元素，无需 box-shadow

.rectangle {
  display: inherit;
  position: absolute;
  background-color: #D90030;
  min-width: 200px;
  max-width: 400px;
  height: 98px;
  filter: drop-shadow(3px 3px 5px 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;
}

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

你也可以这样简化代码：

.rectangle {
  display: inherit;
  position: absolute;
  background: 
    linear-gradient(to top right,#D90030 49.8%,transparent 50%) top right/30px 50%,
    linear-gradient(to bottom right,#D90030 49.8%,transparent 50%) bottom right/30px 50%,
    linear-gradient(#D90030,#D90030) left/calc(100% - 30px) 100%;
  background-repeat:no-repeat;
  min-width: 200px;
  max-width: 400px;
  height: 98px;
  padding-right:30px;
  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;
}

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

Answer 3

@Temani Afif 给了你一个很好的解决方案。如果你需要不同的阴影，你可以这样做：

添加另一个 div 称为阴影 - 并将其放置在您需要三角形的位置，这样您就可以为矩形设置一个 z-index，它会隐藏阴影元素 Example

 .shadow{
       margin-left: 200px;
        margin-top: 0px;
        border-left: 30px solid green;
        border-top: 49px solid transparent;
        border-bottom: 49px solid transparent;
        filter: drop-shadow(3px 3px 5px rgba(0, 0, 0, 0.75));
    }

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

Can the shadow of a pseudo element stay behind its element?

html

css

pseudo-element