[分享]css3带箭头对话框

CSS3是前端开发者必备的技能之一，它可以实现很多有趣的效果，例如带箭头的对话框。

.dialog-box {
  position: relative;
  display: inline-block;
  padding: 20px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.2);
}

.dialog-box::before {
  content: "";
  position: absolute;
  top: -20px;
  left: 50%;
  margin-left: -10px;
  border-top: 20px solid transparent;
  border-bottom: 20px solid #fff;
  border-left: 20px solid #fff;
  border-right: 20px solid #fff;
}

.dialog-box::after {
  content: "";
  position: absolute;
  top: -18px;
  left: 50%;
  margin-left: -8px;
  border-top: 18px solid transparent;
  border-bottom: 18px solid #f2f2f2;
  border-left: 18px solid #f2f2f2;
  border-right: 18px solid #f2f2f2;
} 

以上代码实现了一个基本的带箭头对话框。我们通过伪元素:before和:after来实现箭头的效果，border属性来控制箭头的颜色和大小。我们需要注意的是，在:before元素中，将border-top设为了透明，这是为了实现三角形的效果。

我们可以根据需求对该对话框进行调整，例如改变背景颜色、调整对话框内部的padding和font-size等等。通过掌握CSS3的技能，我们可以实现许多有趣的效果，让网页变得更加生动有趣。