Draw a dialog bubble via a pseudo-element

final effect

A chat bubble box with a shadow effect

final rendering

Knowledge points involved

Pseudo-elements
Common pseudo-elements:
1. ::first-letter: Specify the style of the first letter of an element
2. ::first-line: Set the style of the first line of text in the element
3. ::selection: Match the part selected by the user
4. ::placeholder: Match the text of the placeholder
5 , ::backdrop(in experimental stage): Used to change the background color in full-screen mode
6, ::before: Add content before the element.
7. ::after: Add content after the element.
Worth mentioning: Pseudo-elements are generally referenced using double colons (::).

box-shadow

/* offset-x | offset-y | blur-radius | spread-radius | color */
box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);

Offset in x direction Offset in y direction Blur size Shadow magnify color.

filter: drop-shadow()
```
drop-shadow(offset-x offset-y blur-radius color)
```
Similar to the box-shadow effect, at least spread-radius. But each has its advantages. Today's bubble box can reflect its advantages.

Implementation

First come a chat box, a div is enough

<div class="bubble">气泡内容</div>

Next, is the key part. We achieve the arrow effect
for the element ::afteror . The specific cascading style code is as follows:::before

.bubble {
      
      
  position: relative;
  width: 104px;
  height: 30px;
  line-height: 30px;
  background: rgba(255, 128, 71, 0.9);
  font-size: 12px;
  font-weight: 600;
  color: #ffffff;
  border-radius: 4px;
  right: -9px;
  bottom: -24px;
  text-align: center;
}
.bubble::after {
      
      
  position: absolute;
  content: "";
  width: 8px;
  height: 8px;
  background: rgba(255, 128, 71, 0.9);
  margin-top: -4px;
  top: 50%;
  right: -8px;
  clip-path: polygon(0 0, 50% 50%, 0 100%);
}

The first version came out
First edition effect

Then add a shadow effect to the whole

.bubble {
    
    
  box-shadow: 2px -2px 2px 0px #f00;
}

But the effect is not satisfactory, the shadow effect is not added to the pseudo element

insert image description here
If you need pseudo-element and div to have the same shadow effect just put

box-shadow: 2px -2px 2px 0px #f00;Just replace it with filter: drop-shadow(2px -2px 2px 1px #f00);.

final effect:
final rendering

full code

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style type="text/css">
      * {
      
      
        padding: 0;
        margin: 0;
      }
      #box {
      
      
        box-sizing: border-box;
        width: 100vw;
        height: 100vh;
        padding: 100px;
        background: #bbb;
      }
      .bubble {
      
      
        position: relative;
        width: 104px;
        height: 30px;
        line-height: 30px;
        background: rgba(255, 128, 71, 0.9);
        font-size: 12px;
        font-weight: 600;
        color: #ffffff;
        border-radius: 4px;
        right: -9px;
        bottom: -24px;
        text-align: center;
        filter: drop-shadow(2px -2px 2px 1px #f00);
        /* box-shadow: 2px -2px 2px 0px #f00; */
      }
      .bubble::after {
      
      
        position: absolute;
        content: "";
        width: 8px;
        height: 8px;
        background: rgba(255, 128, 71, 0.9);
        margin-top: -4px;
        top: 50%;
        right: -8px;
        clip-path: polygon(0 0, 50% 50%, 0 100%);
      }
    </style>
  </head>
  <body>
    <div id="box">
      <div class="bubble">气泡内容</div>
    </div>
  </body>
</html>

filter: drop-shadowThe specific usage can refer to MDN