代码之家 › 专栏 › 技术社区 › Rajesh Kumar Dash

创建css聊天泡泡时的line visble

css html

Rajesh Kumar Dash · 技术社区 · 6 年前

我试图在创建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>

任何关于哪里出了问题的线索都会很有帮助。

1 回复 | 直到 5 年前

Amit Kumar Pawar Naïm Baki 6 年前

正如@bhuvan所说,只需添加负z指数

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