个性化的语音气泡答案

【问题标题】：Speech bubble personalized个性化的语音气泡
【发布时间】：2021-09-18 12:52:00
【问题描述】：

大家好，我不擅长前台，但我需要制作一个像这样的文本气泡：泡泡

我最好的尝试是这样，但我需要将钻石降低一半以使其看起来可以接受：myspeechBubble

如果有人知道如何在 css 中执行此操作，我将不胜感激，我需要在中间、左侧和右侧放置 3 个不同的气泡和一个指针

【问题讨论】：

请添加您尝试遇到的问题的代码 sn-ps

标签： html css text styles

【解决方案1】：

您可以使用以下作为您的起点，并根据您的需要调整位置。使用伪选择器来实现相同的目的。（样式属性可能有限制）

.box {
  width: 150px;
  height: 75px;
  background-color: black;
  color: #fff;
  padding: 20px;
  position: relative;
  margin: 40px;
  float: left;
}

.box.arrow-top {
  margin-top: 40px;
}

.box.arrow-top:after {
  content: " ";
  position: absolute;
  right: 30px;
  top: -15px;
  border-top: none;
  border-right: 15px solid transparent;
  border-left: 15px solid transparent;
  border-bottom: 15px solid black;
}

.box.arrow-right:after {
  content: " ";
  position: absolute;
  right: -15px;
  top: 15px;
  border-top: 15px solid transparent;
  border-right: none;
  border-left: 15px solid black;
  border-bottom: 15px solid transparent;
}

.box.arrow-bottom:after {
  content: " ";
  position: absolute;
  right: 30px;
  bottom: -15px;
  border-top: 15px solid black;
  border-right: 15px solid transparent;
  border-left: 15px solid transparent;
  border-bottom: none;
}

.box.arrow-left:after {
  content: " ";
  position: absolute;
  left: -15px;
  top: 15px;
  border-top: 15px solid transparent;
  border-right: 15px solid black;
  border-left: none;
  border-bottom: 15px solid transparent;
}

<div class="box arrow-top">
  This is a box with some content and an arrow at the top.
</div>

<div class="box arrow-right">
  This is a box with some content and an arrow on the right.
</div>

<div class="box arrow-bottom">
  This is a box with some content and an arrow at the bottom.
</div>

<div class="box arrow-left">
  This is a box with some content and an arrow on the left.
</div>

【讨论】：