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

user_6568823 0
Viewed 51

I'm having the problem that the shadow of the pseudo element :before is in front of its element.

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>

I would really like to have the shadow of .rectangle:before behind .rectangle. Is something like that possible?

pseudo-element css html
3 Answers

Use

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

instaed of

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>

user_91407400

Simply apply the drop-filter to the whole element and no need 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>

You can also simplify the code like this:

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

user_86203330

@Temani Afif gave you a nice solution. If you need to have a different shadow you can do it this way:

Add another div called shadow - and position it in the place you need the triangle, This way you can set a z-index to your rectangle and it will hide the shadow element 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));
    }
user_10346370
Related