css实现简单的聊天气泡

<template>
  <div class="dashboard-container">
    <div class="chat-box">
      {{ content }}
    </div>
  </div>
</template>
<script>
var $name = "大家好，我是一个气泡";
export default {
  name: "bubble",
  props: {
    content: {
      type: String,
      default: $name,
    },
  },
};
</script>

<style lang="scss" scoped>
.chat-box {
  position: relative;
  max-width: 200px;
  padding: 10px;
    color: #faae43;
  background: #fff9ed;
  border: 1px solid #ffc16b;
  border-radius: 4px;
  box-shadow: 0 2px 6px rgba(250, 174, 67, 0.8);
}
.chat-box::before {
  position: absolute;
  top: 20px;
  left: -6px;
  width: 10px;
  height: 10px;
  background: #fff9ed;
  border-color: #ffc16b;
  border-style: solid;
  border-width: 1px 0 0 1px;
  transform: rotate(-45deg);
  content: "";
}
</style>