CSS在语音气泡上添加线条答案

【问题标题】：CSS adding line over speech bubbleCSS在语音气泡上添加线条
【发布时间】：2020-09-05 13:29:11
【问题描述】：

我有以下用于对话气泡的 css

现在，我想在对话气泡上添加一个轮廓。有没有人知道怎么做？

.sb13:before {
  content: "";
  width: 0px;
  height: 0px;
  position: absolute;
  border-left: 15px solid transparent;
  border-right: 15px solid #f2f2f2;
  border-top: 15px solid #f2f2f2;
  border-bottom: 15px solid transparent;
  left: -16px;
  top: 0px;
}

.box3 {
  overflow: initial !important;
  margin-top: 10px;
  border-radius: 15px;
  background: #f2f2f2;
  color: #111;
  padding: 15px;
  position: relative;
}

&lt;div class="box3 sb14"&gt;test&lt;/div&gt;

【问题讨论】：

我添加了一个普通的 html，但我正在编辑的 css 将进入 youtube livechat popout。

标签： html css border outline

【解决方案1】：

添加border。

Docs

.sb13:before {
  content: "";
  width: 0px;
  height: 0px;
  position: absolute;
  border-left: 15px solid transparent;
  border-right: 15px solid #f2f2f2;
  border-top: 15px solid #f2f2f2;
  border-bottom: 15px solid transparent;
  left: -16px;
  top: 0px;
}

.box3 {
  overflow: initial !important;
  margin-top: 10px;
  border-radius: 15px;
  background: #f2f2f2;
  color: #111;
  padding: 15px;
  position: relative;
  border: 1px solid black;
}

&lt;div class="box3 sb14"&gt;test&lt;/div&gt;

【讨论】：