【Speech Bubbles】

Speech bubbles!

Bubbles-1-

The height adjusts based on the content. The width is also customizable.


  <div class="balloon">
    <span class="balloon-text">
      The height adjusts based on the content. The width is also customizable.
    </span>
  </div>

Copied!


/* Balloon container styles */
.balloon {
  width: 50%; /* Adjustable width (50% of parent container) */
  max-width: 300px; /* Restrict maximum width */
  background-color: #59afff; /* Set the background color of the balloon */
  clip-path: polygon(
    15% 0%,   /* Top-left corner */
    85% 0%,   /* Top-right corner */
    85% 85%,  /* Bottom-right corner */
    55% 85%,  /* Upper-right point of the tail */
    50% 100%, /* Tip of the tail */
    45% 85%,  /* Upper-left point of the tail */
    15% 85%,  /* Bottom-left corner */
    15% 85%   /* Back to the bottom-left */
  );
  display: flex; 
  justify-content: center; /* Center horizontally */
  align-items: center; /* Center vertically */
}
/* Text inside the balloon */
.balloon-text {
  font-size: 1rem; /* Set the font size */
  color: white; /* Set text color */
  text-align: center; /* Center-align text within the box */
  width: 60%; /* Adjust the width of the text block */
  height: auto; 
  padding-top: 1rem; /* Add padding at the top*/
  padding-bottom: 2rem; /* Add padding at the bottom */
  box-sizing: border-box; 
}

Copied!

You can adjust the width and height of the bubble to contain the text.


  <div class="balloon2">
    <!-- Text inside the balloon -->
    <span class="balloon2-text">You can adjust the width and height of the bubble to contain the text.</span>

    <!-- Triangle part of the speech balloon -->
    <svg class="balloon2-tail" xmlns="http://www.w3.org/2000/svg" width="30" height="20">
      <polygon points="0,0 30,0 15,20" />
    </svg>
  </div>

Copied!


.balloon2 {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 200px; /* Width of the balloon */
  height: 100px; /* Height of the balloon */
  background-color: #59afff; /* Balloon background color */
  border-radius: 10px; /* Rounded corners for the rectangle */
  position: relative; 
  margin-bottom:20px;/* Adds space for the tail */
}
/* Text inside the balloon */
.balloon2-text {
      font-size: 1rem; /* Set the font size */
      color: pink; /* Set text color */
      text-align: center; /* Center-align text within the box */
      width: 90%; /* Adjust the width of the text block */
      height: auto; /* Allow height to adapt to content */
      word-break: break-word; /* Ensure long words break properly */
}
/* Triangle tail of the balloon */
.balloon2-tail {
  position: absolute; 
  bottom: -20px; /* Align triangle below the container */
  left: calc(50% - 15px); /* Center the triangle horizontally */
}
.balloon2-tail polygon {
  fill: #59afff; /* Match the balloon background color */
}

Copied!

You can adjust the size of the bubble. Keep the tail you need and delete the rest in html.


<div class="balloon3-container">
    <!-- Speech Bubble -->
    <svg class="balloon3" viewBox="0 0 120 100" xmlns="http://www.w3.org/2000/svg">
        <g class="balloon3-shape">
            <!-- Main rectangle -->
            <rect x="15" y="15" width="90" height="70" rx="15" ry="15" />
            
            <!-- Four tails -->
            <polygon points="105,40 120,50 105,60" /> <!-- Right tail -->
            <polygon points="50,85 70,85 60,100" /> <!-- Bottom tail -->
            <polygon points="15,40 0,50 15,60" /> <!-- Left tail -->
            <polygon points="50,15 70,15 60,0" /> <!-- Top tail -->
        </g>
    </svg>
    
    <!-- Text outside SVG for better control -->
    <div class="balloon3-text">
        You can adjust the size of the bubble. Keep the tail you need and delete the rest in html.
    </div>
</div>

Copied!


/* Balloon3 container styles */
.balloon3-container {
    display: flex; /* Align bubble content dynamically */
    justify-content: center;
    align-items: center;
    position: relative;
    width: 100%; /* Responsive width */
    max-width: 300px; /* Set the bubble size */
}
/* Speech bubble styling */
.balloon3 {
    width: 100%; /* Fully responsive */
    height: auto; /* Maintain aspect ratio */
    filter: drop-shadow(5px 5px 0px rgba(0, 0, 0, 0.3));/* Shadow effect */
}
.balloon3-shape {
    fill: #59afff; /* Bubble color */
}
/* Text styling inside container */
.balloon3-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 80%; /* Ensure the text fits inside */
    height: auto;
    font-size: 16px;/* Set the font size */
    color: white;
    font-weight: bold;
    text-align: center;
    word-break: break-word; /* Break long words */
    overflow-wrap: break-word; /* Browser compatibility */
    padding: 0px;
    box-sizing: border-box; 
}

Copied!

The height adjusts based on the content. The width is also customizable.


<div class="balloon4-arrow">
  <p>The height adjusts based on the content. The width is also customizable. </p>
</div>

Copied!


.balloon4-arrow {
  position: relative; 
  background: yellow; /* Sets the background color of the bubble */
  border: 7px solid blue; /* Sets the size and color of the border. */
  width: 300px; /* Sets the bubble's width */
  max-width: 100%; /* Ensures the width adjusts responsively */
  border-radius: 5px; /* Adds rounded corners to the bubble */
  margin-bottom:30px; /* Adds space below the content for the height of the arrow */
}
/* Pseudo-elements for creating the arrow shape (bottom center of the bubble) */
.balloon4-arrow:after, .balloon4-arrow:before {
  top: 100%; 
  left: 50%; 
  border: solid transparent; 
  content: "";
  height: 0; 
  width: 0;
  position: absolute; 
}
/* Inner arrow layer (smaller, matches the bubble background color) */
.balloon4-arrow:after {
  border-top-color: yellow; /* The arrow's background color */
  border-width: 17px; /* Controls the size of the inner arrow */
  margin-left: -17px; /* Centers the inner arrow horizontally */
}
/* Outer arrow layer (larger, matches the bubble border color) */
.balloon4-arrow:before {
  border-top-color: blue; /* The arrow's border color */
  border-width: 28px; /* Controls the size of the outer arrow. */
  margin-left: -28px; /* Centers the outer arrow horizontally*/
}
/* Styling for the text inside the bubble */
.balloon4-arrow p {
  word-break: break-word; /* Break long words */
  overflow-wrap: break-word; /* Browser compatibility */
  font-weight: bold; 
  padding: 10px; /* Adds space inside the bubble for the text. */
  text-align: center; /* Centers the text horizontally within the bubble. */
}

Copied!

【Speech Bubbles】

Helpful Resources