使用css实现气泡框的效果

.bubble-container {
  position: relative;
  display: inline-block; /* or block, depending on your layout needs */
}

.bubble {
  position: absolute;
  background-color: #fff;
  border-radius: 5px;
  padding: 10px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15); /* Optional: Add a subtle shadow */
  z-index: 1; /* Ensure the bubble is on top */

  /* Positioning adjustments - change these based on where you want the bubble to appear */
  top: -20px; /* Adjust vertical position */
  left: 50%;
  transform: translateX(-50%); /* Center horizontally */
}

.bubble::before {
  content: "";
  position: absolute;
  border-style: solid;
  border-width: 0 10px 10px 10px; /* Adjust triangle size */
  border-color: transparent transparent #fff transparent; /* Match bubble background */
  bottom: -10px; /* Position the triangle at the bottom of the bubble */
  left: 50%;
  transform: translateX(-50%); /* Center horizontally */
}


/* Example usage with different positioning */

.bubble-top {
  top: -100%; /* Position above */
  left: 50%;
  transform: translateX(-50%);
}

.bubble-top::before {
  top: 100%; /* Pointing upwards */
  bottom: auto;
  border-color: #fff transparent transparent transparent;
}


.bubble-left {
  top: 50%;
  left: -100%; /* Position to the left */
  transform: translateY(-50%);
}

.bubble-left::before {
  left: 100%; /* Pointing right */
  top: 50%;
  transform: translateY(-50%);
  border-width: 10px 10px 10px 0;
  border-color: transparent #fff transparent transparent;
}


.bubble-right {
  top: 50%;
  right: -100%; /* Position to the right */
  transform: translateY(-50%);
  left: auto;
}

.bubble-right::before {
  right: 100%; /* Pointing left */
  top: 50%;
  transform: translateY(-50%);
  border-width: 10px 0 10px 10px;
  border-color: transparent transparent transparent #fff;
}

Explanation and How to Use:

1. bubble-container: This is the parent container. It's crucial for positioning the bubble relative to its content. Use display: inline-block if you want the container to fit the content's width, or display: block if you want it to take up the full width.

2. bubble: This is the actual bubble element.

   • background-color, border-radius, padding, and box-shadow control the bubble's appearance.
   • position: absolute allows us to position it relative to the bubble-container.
   • z-index: 1 ensures the bubble appears above other content.

3. bubble::before: This creates the triangle "pointer."

   • content: ""; is necessary for pseudo-elements.
   • border-style: solid and border-width create the triangle shape using transparent borders. The non-transparent border creates the visible triangle. The values here control the size of the triangle.
   • border-color should match the background-color of the bubble.
   • Positioning properties (top, left, transform) control where the triangle appears relative to the bubble.

4. Positioning Variations: The examples .bubble-top, .bubble-left, and .bubble-right demonstrate how to position the bubble and its pointer in different locations. Adjust the top, left, right, bottom, and transform properties as needed. The key is to change the border-color in the ::before pseudo-element so the solid color corresponds to the direction the triangle should point.

Example HTML (using the bubble-top variation):

<div class="bubble-container">