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

可以使用CSS的伪元素:before和:after来实现消息对话框箭头朝下的效果。下面是一个简单的例子：

HTML代码：

<div class="message-box">
  <p>Hello, how are you?</p>
</div>

CSS代码：

.message-box {
  position: relative;
  background-color: #f0f0f0;
  padding: 10px;
  margin: 10px;
}

.message-box:before {
  content: "";
  position: absolute;
  top: -10px;
  left: 10px;
  border-style: solid;
  border-width: 10px 10px 0 10px;
  border-color: #f0f0f0 transparent transparent transparent;
}

.message-box:after {
  content: "";
  position: absolute;
  top: -8px;
  left: 12px;
  border-style: solid;
  border-width: 8px 8px 0 8px;
  border-color: #ffffff transparent transparent transparent;
}

解释：

1. .message-box是用来包含文本内容的div元素，它的position属性设置为relative，是为了让它的伪元素可以相对于它的位置进行定位。

2. .message-box:before是用来创建箭头的伪元素，它的content属性设置为空字符串，是为了让它可以显示出来。它的位置使用了绝对定位，top和left属性用来控制箭头的位置。border-style、border-width和border-color属性用来设置边框的样式、宽度和颜色。

3. .message-box:after是用来创建箭头的阴影的伪元素，它的位置和样式与:before类似，只是边框颜色不同，用来实现箭头的阴影效果。

这样，就可以实现一个简单的消息对话框了，箭头朝下的效果也被实现了。