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:before之后留下.rectangle的影子。这样有可能吗？

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为您提供了一个不错的解决方案。如果您需要其他阴影，可以按照以下方式进行：

添加另一个名为shadow的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));
    }

伪元素的阴影能否留在其元素后面？

3 个答案: