How to give shadow under triangle?

user_12947042 0
Viewed 55

I am not able to give the shadow in triangle △.
When I give shadow for triangle then it losses their original structure.

/* CSS */
.stack_1{
  position: relative;
  display:inline-block;
}

.stack_1:before {
    position: absolute;
    content: 'Title name';
    font-style: italic;
    bottom: -28px;
    padding: 1px 10px;
    left: calc(50% - 20px);
    background-color: #7badce;
    display: inline-block;
    white-space: nowrap;
    color: white;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    border-top-right-radius: 5px;
    border: 1px outset #3bacf7;
    z-index: 100;
    box-shadow: 0 5px 20px -7px #4c4b4b;
}
.stack_1:after{
    position: absolute;
    content: '';
    border-right: 10px solid transparent;
    border-left: 10px solid transparent;
    border-top: 10px solid #7badce;
    left: calc(50% - 20px);
    bottom: -5px;
    transform: rotate(180deg);
    z-index: 100;
}
<!- HTML-->
<article class="stack_1">
<span class="stack_1_info">Hello stackO)verflow</span>
</article>

Please notice that there is a shadow under tool-tip.
but how can I give shadow on triangle △

css html
1 Answers

Since you want the shadow under the triangle and not the bounding box (box-shadow affects the bounding box), you can use filter: drop-shadow().

filter: drop-shadow applies to the rendered element and not the bounding box.

Three caveats:

  1. filter does not work in IE11
  2. drop-shadow does not accept the fourth - spread - parameter
  3. filter has mixed results across browsers on SVG elements.

/* CSS */
.stack_1{
  position: relative;
  display:inline-block;
}

.stack_1:before {
    position: absolute;
    content: 'Title name';
    font-style: italic;
    bottom: -28px;
    padding: 1px 10px;
    left: calc(50% - 20px);
    background-color: #7badce;
    display: inline-block;
    white-space: nowrap;
    color: white;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    border-top-right-radius: 5px;
    border: 1px outset #3bacf7;
    z-index: 100;
    box-shadow: 0 5px 20px -7px #4c4b4b;
}
.stack_1:after{
    position: absolute;
    content: '';
    border-right: 10px solid transparent;
    border-left: 10px solid transparent;
    border-top: 10px solid #7badce;
    left: calc(50% - 20px);
    bottom: -5px;
    transform: rotate(180deg);
    z-index: 99;
    /* ADDED THIS */
    filter: drop-shadow(0 -10px 8px #4c4b4b);
}



.stack_2{
  position: relative;
  display:inline-block;
}

.stack_2::before {
    position: absolute;
    content: 'Title name';
    font-style: italic;
    bottom: -28px;
    padding: 1px 10px;
    left: calc(50% - 20px);
    background-color: #7badce;
    display: inline-block;
    white-space: nowrap;
    color: white;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    border-top-right-radius: 5px;
    border: 1px outset #3bacf7;
    z-index: 100;
    box-shadow: 0 5px 20px -7px #4c4b4b;
}
.stack_2::after{
    position: absolute;
    background-color: #7badce;
    content: '';
    width: 20px;
    height: 15px;
    left: calc(50% - 20px);
    bottom: -5px;
    z-index: 99;
    clip-path: polygon(49% 33%, 0% 100%, 100% 100%);
    box-shadow: 0 0 10px #000;
}
<!- HTML-->
<article class="stack_1">
<span class="stack_1_info">Hello stackO)verflow</span>
</article>


<!- HTML-->
<article class="stack_2">
<span class="stack_2_info">Hello StackOverflow</span>
</article>

MDN documentation on filter: https://developer.mozilla.org/en-US/docs/Web/CSS/filter

user_11721890
Related