使用css实现对话气泡的效果

/* Basic bubble styles */
.chat-bubble {
  position: relative;
  display: inline-block;
  padding: 10px 15px;
  border-radius: 20px;
  max-width: 75%; /* Adjust as needed */
  margin-bottom: 10px;
  clear: both;
}

/* User bubble */
.user .chat-bubble {
  background-color: #007bff; /* Example color */
  color: white;
  float: right;
}

.user .chat-bubble::before {
  content: "";
  position: absolute;
  bottom: 0;
  right: -10px;
  border-bottom-left-radius: 10px;
  border-width: 10px;
  border-style: solid;
  border-color: transparent #007bff transparent transparent; /* Match background */
}

/* Other user/bot bubble */
.other .chat-bubble {
  background-color: #e9ecef; /* Example color */
  color: #343a40;
  float: left;
}

.other .chat-bubble::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: -10px;
  border-bottom-right-radius: 10px;
  border-width: 10px;
  border-style: solid;
  border-color: transparent transparent transparent #e9ecef; /* Match background */
}


/* Example HTML structure */
```html
<div class="chat-container">
  <div class="user">
    <div class="chat-bubble">Hello!</div>
  </div>
  <div class="other">
    <div class="chat-bubble">Hi there!</div>
  </div>
  <div class="user">
    <div class="chat-bubble">How are you?</div>
  </div>
</div>

Explanation and Key Improvements:

• Clearer Structure: Uses user and other classes to differentiate between message senders, making styling and scripting easier.
• Triangle "Tail": The ::before pseudo-element creates the small triangle that points towards the sender, making it clear who said what. The border colors are set to transparent except for the side that creates the triangle, and this color matches the background color of the bubble.
• Responsive Design: max-width: 75% prevents bubbles from stretching across the entire screen on larger displays. You can adjust this value as needed.
• Float Positioning: float: right for user bubbles and float: left for other bubbles positions them on the correct sides. clear: both ensures each bubble starts on a new line.
• Simple Styling: Basic styling is provided for background color, text color, padding, and border-radius. Customize these to fit your design.

Further Enhancements:

• Avatars: Add avatar images next to the bubbles for better visual identification.
• Timestamps: Include timestamps with each message.
• Different Bubble Styles: Create variations for different message types (e.g., images, files).
• JavaScript Interaction: Use JavaScript to dynamically add new bubbles to the chat container. You'll probably want to use a framework/library for this, or at least handle the DOM manipulation carefully.

This improved CSS provides a solid foundation for creating dynamic and visually appealing chat bubbles. Remember to adapt the HTML structure and CSS classes to your specific project requirements.