html - 创建CSS聊天气泡时可见的行

我尝试在创建时使用css聊天气泡，我可以在聊天气泡中看到一条直线穿过三角形，如下图所示

在chrome浏览器上，同样的工作没有任何问题，但是在旧的xulrunner浏览器上，这给出了一行。

.talk-bubble {
  margin: 40px;
  display: inline-block;
  position: relative;
  width: 200px;
  height: auto;
  background-color: blue;
}

.triangle.left-top:after {
  content: ' ';
  position: absolute;
  width: 0;
  height: 0;
  left: -20px;
  right: auto;
  top: 0px;
  bottom: auto;
  border: 22px solid;
  border-color: blue transparent transparent transparent;
}

.triangle.right-top:before {
  content: ' ';
  position: absolute;
  width: 0;
  height: 0;
  left: auto;
  right: -20px;
  top: 0;
  bottom: auto;
  border: 32px solid;
  border-color: blue transparent transparent transparent;
}

<div class="talk-bubble triangle left-top">
  <p>Left flush at the top.</p>
</div>
<div class="talk-bubble triangle right-top">
  <p>Right flush at the top.</p>
</div>

关于出问题的任何线索都将有所帮助。

最佳答案

正如@bhuvan所说，只需添加负Z-index

.talk-bubble {
  margin: 40px;
  display: inline-block;
  position: relative;
  width: 200px;
  height: auto;
  background-color: blue;
}

.triangle.left-top:after {
  content: ' ';
  position: absolute;
  width: 0;
  height: 0;
  left: -20px;
  right: auto;
  top: 0px;
  bottom: auto;
  border: 22px solid;
  border-color: blue transparent transparent transparent;
z-index:-1;
}

.triangle.right-top:before {
  content: ' ';
  position: absolute;
  width: 0;
  height: 0;
  left: auto;
  right: -20px;
  top: 0;
  bottom: auto;
  border: 32px solid;
z-index:-1;
  border-color: blue transparent transparent transparent;
}

<div class="talk-bubble triangle left-top">
  <p>Left flush at the top.</p>
</div>
<div class="talk-bubble triangle right-top">
  <p>Right flush at the top.</p>
</div>