纯css实现消息对话框 箭头朝下的

可以使用CSS中的伪元素::before和::after结合transform属性来实现消息对话框中箭头朝下的效果。以下是一个简单的示例代码：

HTML代码：

<div class="message-box">
  <div class="message">你好，这是一条消息。</div>
</div>

CSS代码：

.message-box {
  position: relative;
  width: 200px;
  height: 80px;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 5px;
}

.message {
  position: absolute;
  top: 10px;
  left: 10px;
  right: 10px;
  bottom: 10px;
  padding: 10px;
  font-size: 14px;
  line-height: 1.5;
}

.message-box::before {
  content: "";
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  border-width: 10px;
  border-style: solid;
  border-color: transparent transparent #fff transparent;
}

.message-box::after {
  content: "";
  position: absolute;
  top: -9px;
  left: 50%;
  transform: translateX(-50%);
  border-width: 10px;
  border-style: solid;
  border-color: transparent transparent #ccc transparent;
}

解释一下上面的代码：

首先，我们创建一个包含消息内容的div，称为.message。然后，我们创建一个容器div，称为.message-box，用于包含消息。接下来，我们使用伪元素::before和::after来创建容器div上方的箭头。使用transform: translateX(-50%)将箭头水平居中。箭头的背景颜色是白色，边框颜色是灰色，使用border-width控制箭头的大小。最后，我们需要将箭头放在消息盒子上方，使用position: absolute和top属性实现。