[分享]css3发言泡泡

发言泡泡是现代网站设计中常见的元素之一。通过使用 CSS3 技术，我们可以实现漂亮、可定制的发言泡泡。

.bubble {
  position: relative;
  width: 200px;
  height: 100px;
  background-color: #fff;
  border: 2px solid #333;
  border-radius: 10px;
  padding: 10px;
}

.bubble::before {
  content: "";
  position: absolute;
  left: -18px;
  top: 25px;
  border-style: solid;
  border-width: 10px 18px 10px 0;
  border-color: transparent #333 transparent transparent;
}

.bubble::after {
  content: "";
  position: absolute;
  right: -18px;
  top: 25px;
  border-style: solid;
  border-width: 10px 0 10px 18px;
  border-color: transparent transparent transparent #333;
} 

上述代码实现了一个简单的发言泡泡。我们首先定义了一个 bubble 类，它有一个白色背景和黑色边框，使用 border-radius 属性实现了圆角边框。接下来使用伪元素 ::before 和 ::after 分别实现了左上角和右上角的三角形。

我们可以对这些属性进行定制，修改颜色、大小、箭头方向等等。这样，我们就可以设计出美观、实用的发言泡泡了。