Is it possible for the shadow of a pseudo element to remain lingering behind its corresponding element?

I'm experiencing an issue where the shadow of the pseudo element :before appears in front of its associated element.

Check out this JSFiddle link for reference 
<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 am looking for a solution to make the shadow of .rectangle:before appear behind .rectangle. Is there a way to achieve this?

htmlcsspseudo-element

Answer №1

Try

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

instead of

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

Check out the demo on JSFiddle

.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

To easily add a drop shadow effect to an entire element, you can use the drop-filter property without having to apply 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 simplify the code further by using this method:

.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

Here is a great solution provided by @Temani Afif. If you want to achieve a different shadow effect, you can follow these steps:

Create an additional div named "shadow" and position it where you want the triangle. By doing this, you can assign a z-index to your rectangle, which will conceal the shadow element. Check out this 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));
    }

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The target="_blank" attribute does not seem to function properly within an iframe

I've been tackling the WordPress media library tab recently. Within this iframe, I included a link with target="_blank". My expectation was for this link to open in a new browser tab or window, but instead, it opens within the iframe tab. Here's ...

htmliframe

Design an HTML watermark input that remains visible as the user starts typing

I'm currently in the process of developing an application that enables businesses to access their account through theirname.mydomain.com. I am working on creating a signup form for this purpose. Today, I stumbled upon squarespace and noticed they hav ...

jqueryhtml

The initial item in the Materializecss slider is failing to display

Currently, I am attempting to implement materialize slider with skrollr. The setup is functional; however, only the first item of the slider is set to opacity: 0 initially. https://i.stack.imgur.com/urSww.jpg After a brief delay, the second item becomes ...

jquerycssslidermaterialize

The CSS and JavaScript in pure form are not functioning properly upon deployment in Django

In my Django project, I am utilizing pure CSS and Bootstrap. Everything appears as expected when I test it on my local machine. However, once deployed, the appearance changes. The font looks different from how it did before deployment: After deploying to ...

javascripthtmlcssdjangoyui-pure-css

Applying a left margin has caused the right border to disappear

After adding a margin-left to the box, I noticed that my right border is missing. You can see the issue in this example. However, when I remove the margin-left property, everything looks fine as shown in this example. Is there any way to solve this proble ...

htmlcssionic-framework

Ways to utilize media queries for repositioning one div on top of another div

Utilizing Bootstrap 5 for website development, my aim is to enhance the responsiveness of the site across various devices. For mobile users, I envision the image-containing div to appear above the div containing the header and paragraph content, but I&apo ...

htmlcssfrontendmedia-queriesbootstrap-5

Can someone explain how to implement an onclick event for a div element inside an iframe using jquery or javascript?

Understanding the HTML Structure <iframe src="#" scrolling="no" id="gallery-frame"> <div class="gv_filmstrip"> <div class="gv_frame"> <div class="gv_thumbnail current"> <img src="images/grandstand-padang-right/1.jpg"> </d ...

javascriptjqueryhtmliframe

Tips for Integrating a Facebook Shop Page into Your Website

Can a Facebook shop page be integrated into a website? Any guidance on how to accomplish this task would be greatly valued. ...

javascripthtmlfacebookpluginsembed

There is an irritating 5px gap between the divs in the Avada WordPress theme. While using margin-top: -5px helps to reduce this spacing, padding-top: -5

Struggling to remove a persistent 5px whitespace on my website eternalminerals.com See the issue highlighted in this screenshot: Trying to eliminate the whitespace by adjusting margins in Google Chrome, but unable to apply styles to Avada shortcodes: &l ...

htmlcsslayoutwordpress

Error: Badge not responsive in Boostrap 4

I have a project to create a table of contents using BOOTSTRAP4. I researched and used https://getbootstrap.com/docs/4.6/components/list-group/. However, the Badge does not align correctly as expected, it remains fixed with the content. <ul class=&qu ...

htmlcssbootstrap-4

Is there a way to use jQuery to make a div fade in and toggle over another

I have created a test page and I am looking to achieve a specific effect when the page loads. I want everything on the page to be hidden initially. When I click on the "About" text, I want it to fade in using fadeToggle(); however, when I click on "My work ...

javascriptjqueryhtmlcss

Submitting a form through Ajax is resulting in multiple submissions

Whenever I use Ajax to submit this form, it ends up posting multiple times without any obvious reason. Sometimes, it posts the form up to 10 times even though the submit button is clicked only once. I'm puzzled as to why this behavior is happening. An ...

javascriptphphtmlajaxforms

Modifying CSS post-rendering to accommodate right-to-left or left-to-right text orientation

I have a unique single-page JavaScript website that retrieves text from a web request in JSON format. The direction of the text (RTL or LTR) is only determined once the response is received. Is there a method to re-render the page after receiving the res ...

css

Slideshow plugin glitch on Safari and Opera caused by jQuery implementation

My current project involves utilizing a fantastic plugin called Sequence.js for creating animations and transitions with CSS3 based on jQuery. I have set up a simple responsive fadeIn-fadeOut slideshow using this plugin. While everything works smoothly an ...

jquerycsssafarislideshowopera

Please enter a number using the "+" sign and a decimal point

In my input field, I have specified: <input type="number" step="0.01"> I expect all of these input values to produce the following outputs: 2.00 => 2.00 2,00 => 2.00 +2,00 => 2.00 However, when entering the value "+2.00", it fail ...

javascripthtml

Persist the checkbox value in the database and update the status of the label accordingly

I need a checkbox for user preference selection that is stored in a MySQL database for constant availability. The label should change to "Enabled" when the checkbox is selected and vice versa. Upon saving (submitting) the page, an alert message should disp ...

javascriptphpjqueryhtml

Exploring the font variables in the asset pipeline of Rails 7

Creating a habit of defining a set of root variables is crucial for maintaining consistency throughout an application. :root { --main-font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif; --kbd-font-family: Consolas, "Libe ...

cssruby-on-railsasset-pipeline

Utilize C# and SmtpClient to efficiently send HTML emails

Is there a way to send HTML emails instead of plain text using SmtpClient? I have been following the code provided in this solution, but the output always ends up as plain text. For example, the link in the sample message below is not displayed as an activ ...

c#htmlasp.netemailsmtpclient

Send a POST form from my website to another website and retrieve the data from the remote server

My website, example.com, includes a web HTML form that leads to another site where the results are currently displayed. I want to retrieve these results from the other website using PHP or some other method and showcase them on my own site. However, the fo ...

javascriptphpjqueryhtmlcss

Deleting tasks from the to-do list using Node.js and Express with EJS

Looking to implement functionality where each list item can be removed from a Node.js array by clicking on an HTML button using EJS and Express: I am considering placing an HTML button next to each list element so that the selected element can be removed ...

javascripthtmlnode.jsexpressejs