html - 在 CSS 中创建一个聊天气泡，边框围绕 ::before 属性

Question

大家好，我想在 CSS 中制作一个带有边框的聊天气泡。

我面临的问题是在这个css中为::before添加边框属性，给它一个干净的边框。

正如您可以运行我的片段并看到 ::before "box-shadow" 属性没有得到应用的顶部，我想让它与上面发布的图像完全一样。

有人可以帮我解决这个问题吗？谢谢

/* General CSS Setup */

body {
  background-color: white;
  padding: 50px;
}


/* CSS talk bubble */

.talk-bubble {
  padding: 11px 16px;
  position: relative;
  box-shadow: rgb(126 151 179 / 70%) 0px 0px 3px;
  border-radius: 0px 50px 50px 50px;
  font-size: 18px;
  color: #000000;
  display: inline-block;
}


/* Right triangle placed top left flush. */

.tri-right.left-top:before {
  content: "";
  position: absolute;
  box-shadow: rgb(126 151 179 / 70%) 0px 2px 0px -1px;
  -moz-transform: rotate(45deg);
  -webkit-transform: rotate( 45deg);
  top: -9px;
  left: -8px;
  border-width: 9px;
  border-style: solid;
  border-color: transparent #fff #fff transparent;
}

<div class="talk-bubble tri-right left-top">
  <div class="talktext">
    <p>This one adds at the top by .</p>
  </div>
</div>

标签： htmlcss