loading...

Discussion on: How to make a CSS speech bubble with borders and drop shadow

Collapse
equinusocio profile image
Mattia Astorino

Hi, you can achieve the shadow with the same elements from the first example, just put this to the
speech-bubble:

.speech-bubble {
  filter: drop-shadow(6px 4px 0px rgba(0, 0, 0, 0.2));
  border: 1px solid black;
}

And this to the ::after:

.speech-bubble::after {
  bottom: -19px;
  filter: drop-shadow(1px 2px 0 black);
}
Collapse
teroauralinna profile image
Tero Auralinna Author

Hi, thanks for the tip! That also works well and simplifies code.