实现一个对话气泡框

今天来实现一个对话气泡框。长这样：

直接上代码吧：

import './App.css';

function App() {
  return (
    <>
      <div className="bubble">实现一个会话气泡</div>
    </>
  );
}

export default App;

.bubble {
  padding: 20px 50px;
  border-radius: 20px;
  position: relative;
  box-sizing: border-box;
  flex-shrink: 0;
  font-size: 30px;
  background: linear-gradient(#ffffff, #fbefd9);
  border: 1px solid #f9d19e;
  color: #725e47;
  font-weight: 600;
}

.bubble:after,
.bubble:before {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  border: 10px solid transparent;
  border-top-color: #f9d19e;
  left: 50%;
  margin-left: -4px;
  bottom: -20px;
}

.bubble:after {
  border-top-color: #fbefd9;
  bottom: -19px;
}

思路就是通过 before 和 after 创建两个三角形，将 before 设置为边框的颜色，after 设置为气泡内部的颜色，通过 absolute 定位，将 after 覆盖在 before 上，并且留出边框线的距离（即after的bottom比before更加靠上边一点）。

绘制三角形

绘制三角形的思路大家应该都知道，在这里简单描述下吧。

三角形是通过正方形演变来的，而正方形是通过边框实现的：

import './App.css';

function App() {
  return (
    <>
      <div className="rect"></div>
    </>
  );
}

export default App;

.rect {
  border: 10px solid green;
}

以上代码就绘制了一个边长为10的小正方形：

一个正方形可以理解成四个三角形组成的，想要哪个方向的三角形，将另外三个透明，想要的那个设置不透明即可：

.triangle {
  border: 10px solid transparent;
  border-top-color: red;
}