CSS在语音气泡上方添加了一行

问题描述

对于气泡，我有以下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;
}

<div class="Box3 sb14">test</div>

解决方法

添加一个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;
}

<div class="box3 sb14">test</div>