CSS box shadow conflicting with pseudo-element

问题

Is there a way to disable the box shadow for the part where the pseudo-element arrow resides?

Current:

or without the negative z-index on the pseudo-element:

Desired result:

#element { 
    position: relative;
    width: 100px;
    height: 100px;
    background-color: blue;
    box-shadow: 5px 5px 5px #222;
}

#element::after {
    content: "";
    width: 25px;
    height: 25px;
    background-color: blue;
    top: 40px;
    left: 88px;
    transform: rotate(45deg);
    position: absolute;
    z-index: -1;
    -webkit-filter: drop-shadow(5px 5px 5px #222);
    filter: drop-shadow(5px 5px 5px #222); 
}

<div id="element"></div>

回答1:

You can't control which parts of a box shadow or a drop shadow filter are rendered, at least not directly.

Depending on your layout, you could cheat by patching another pseudo-element over the one that you have. I swap the ::after with a ::before to obviate the need for z-index because boxes with the same stack level stack from back to front (meaning ::after stacks in front of ::before).

However if you have any content in your element, you will need to position the content and give it z-index: 1 to ensure that it will paint on top of both of your pseudo-element boxes, since ::after comes after the main content and will therefore also stack in front of the content. See the #element > p rule in the following example.

#element { 
    position: relative;
    width: 100px;
    height: 100px;
    background-color: blue;
    box-shadow: 5px 5px 5px #222;
}

#element::before, #element::after {
    content: "";
    background-color: inherit;
    position: absolute;
}

#element::before {
    width: 25px;
    height: 25px;
    top: 40px;
    left: 88px;
    transform: rotate(45deg);
    -webkit-filter: drop-shadow(5px 5px 5px #222);
    filter: drop-shadow(5px 5px 5px #222); 
}

#element::after {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

#element > p {
    position: relative;
    z-index: 1;
}

<div id="element"><p>text</p></div>

来源：https://stackoverflow.com/questions/28304564/css-box-shadow-conflicting-with-pseudo-element

标签

css

css3

pseudo-element

css-filters