CSS3实现气泡对话框

实现原理

可以把该对话框拆解为带圆角的普通矩形+三角形, 三角形可以借助border属性实现, 其中三角形占位可以借助CSS3的before、after伪元素实现.

1.1 不带边框的对话框

// 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;
}复制代码

先看看实现效果：

很多时候, 设计师期望的是带边框、背景为白色的, 那么我们接着往下看~

1.2 带边框的对话框

实现原理：将2个三角形叠加、before的三角形边框颜色和外面框的保持一致, after的三角形边框设置成白色即可.

// 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;
  }复制代码

再来看看实现效果叭