css气泡框三角形 并且背景颜色为灰色 边框为蓝色

您可以使用CSS伪元素来创建气泡框的三角形，并通过CSS属性设置背景颜色和边框颜色。以下是一个示例代码片段，您可以根据自己的需求进行修改：

<div class="bubble">
  <p>This is a bubble with a triangle.</p>
</div>

.bubble {
  display: inline-block;
  position: relative;
  background-color: #ccc;
  border: 2px solid blue;
  padding: 10px;
  border-radius: 5px;
}
.bubble::before {
  content: '';
  position: absolute;
  top: 50%;
  right: 100%;
  margin-top: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent blue transparent transparent;
}

在上面的代码片段中，`.bubble`类定义了气泡框的样式，包括背景颜色、边框颜色、内边距和圆角。`.bubble::before`伪元素用于创建三角形，通过设置`border-color`属性来控制三角形的颜色。您可以根据需要调整`border-width`和`margin-top`属性来改变三角形的大小和位置。