使用 css 创建一个气泡语音矩形

【问题标题】：Create a bubble speech rectangle using css使用 css 创建一个气泡语音矩形
【发布时间】：2020-09-16 03:50:19
【问题描述】：

我想创建一个对话气泡的结构，但有一点定制的结构。我在这里尝试了一些基本的边框宽度技术。任何建议都会有所帮助

【问题讨论】：

标签： html css design-patterns css-transitions

【解决方案1】：

您可以像绘制形状并将它们添加在一起那样使用对话气泡。研究这些链接以获取更多信息

.box {
  width: 200px;
  background: grey;
  text-align: center;
  padding:20px;
  position:relative;
  border-radius:5px;
}
.triangle:before {
  content: "";
  width: 0px;
  height: 0px;
  position: absolute;
  border-left: 10px solid grey;
  border-right: 10px solid transparent;
  border-top: 10px solid grey;
  border-bottom: 10px solid transparent;
  right: -20px;
  top: 6px;
}

&lt;div class="box triangle"&gt;Type your text here&lt;/div&gt;

【讨论】：