创建CSS聊天气泡时线可见

Question

我正在尝试使用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>

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

Answer 1

@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>