CSS3 implements the bubble dialog box

Realize the principle of

This dialog can be broken down into a normal rectangle with rounded corners + triangle, which can be implemented with the border property, and the triangle placeholder can be implemented with CSS3’s before and after pseudo-elements.

1.1 Dialog box without border

// html
<div class="bubble"></div>
// css
.bubble {
  width: 300px;
  height: 100px;
  border-radius: 10px;
  background-color: aquamarine;
  position: relative;
  margin-left: 20px;
}
.bubble::before {
  position: absolute;
  top: 40px;
  left: -20px;
  content: '';
  width: 0;
  height: 0;
  border-right: 10px solid aquamarine;
  border-bottom: 10px solid transparent;
  border-left: 10px solid transparent;
  border-top: 10px solid transparent;
}
Copy the code

Let’s take a look at the implementation:

Most of the time, designers want something with a white background and a border, so let’s move on

1.2 Dialog box with border

Implementation principle: Overlay 2 triangles, before triangle border color and the outer frame keep the same, after triangle border set to white.

// html
  <div class="bubble-border"></div>
// css
 .bubble-border {
    width: 300px;
    height: 100px;
    border-radius: 10px;
    background-color: #ffffff;
    border: 1px solid red;
    position: relative;
    margin-left: 20px;
  }
  .bubble-border::before,
  .bubble-border::after {
    position: absolute;
    top: 40px;
    left: -20px;
    content: '';
    width: 0;
    height: 0;
    border-right: 10px solid red;
    border-bottom: 10px solid transparent;
    border-left: 10px solid transparent;
    border-top: 10px solid transparent;
  }
  .bubble-border::after {
    left: -19px;
    border-right: 10px solid #ffffff;
  }
Copy the code

Let’s see how it works