Question

如何在css中为parent创建一个向下箭头，使它看起来像一个语音泡泡？

这就是我的尝试。

<div class="parent">TEST
   <span class="tri">TEST</span>
</div>

.tri {
  opacity: 0;
 }
 .tri:before {
  position: absolute;
  top: 40%;
  left: 50%;
  margin-top: -15px;
  margin-left: -100px;
  background-color: #FFF;
  color: #000;
  text-align: center;
  padding: 10px;
  min-width: 200px;
}

.tri:after {
  border-top:  5px solid #000;
  border-top:  5px solid #000;
  border-right:  5px solid transparent;
  border-left:  5px solid transparent;
}

.parent:hover .tri:before, .parent:hover .tri:after {
  opacity: 1;
}

Fiddle

Answer 1

你在这里缺少两件事：

内容：＆＃39;＆＃39 ;;对于伪

显示父伪

:before,

:after {
  content: '';

}

.parent:hover .tri,

.parent:hover .tri:before,

.parent:hover .tri:after {

  opacity: 1;

}

＆＃13;

:before,
:after {
  content: '';
}
.parent:hover .tri,
.parent:hover .tri:before,
.parent:hover .tri:after {
  opacity: 1;
}
.tri {
  opacity: 0;
}
.tri:before {
  position: absolute;
  top: 40%;
  left: 50%;
  margin-top: -15px;
  margin-left: -100px;
  background-color: #FFF;
  color: #000;
  text-align: center;
  padding: 10px;
  min-width: 200px;
}
.tri:after {
  border-top: 5px solid #000;
  border-top: 5px solid #000;
  border-right: 5px solid transparent;
  border-left: 5px solid transparent;
}

＆＃13;

<div class="parent">TEST
  <span class="tri">TEST</span>
</div>

＆＃13;

https://fiddle.jshell.net/0h05kbsd/3/

你也可以使用像\25bc这样的unicode字符来节省一些代码：

＆＃13;

a:hover:after {
  content:'\25bc';
}

＆＃13;

<a href> link to hover to show a down-arrow</a>

＆＃13;

unicode ressource等：http://unicode-table.com/en/sets/arrows-symbols/

Answer 2

喜欢这个？

.tri {
  opacity: 1;
  display: block; 
 }
 .tri:after {
  content: '';
  display: inline-block; width: 10px; height: 10px;
  margin: -5px 0 0 10px; padding: 0;
  border: 5px solid #000;
  border-width: 0 3px 3px 0;
  background: transparent;
  transform: rotate(45deg);
}

与两个border形成一个角度，然后将其旋转45度或您需要指向的位置。重要提示：:after或:before伪元素始终需要content: ''属性，即使它只是一个空字符串。否则，伪元素将不会显示。

很容易找到更详细的整个语音泡泡的例子，例如this fiddle。

Answer 3

您可以使用clip-path作为border形状的替代品

div:before {
  content: '';
  position: absolute;
  display: block;
  left: -20px;
  top: 6px;
  width: 20px;
  height: 20px;
  background-color: #888;
  -webkit-clip-path: polygon(0 50%, 100% 0 , 100% 100%)
}

div {
  width: 150px;
  height: 50px;
  background-color: #999;
  margin-left: 40px;
  border-radius: 4px;
  position: relative;
}

div:before {
  content: '';
  position: absolute;
  display: block;
  left: -20px;
  top: 6px;
  width: 20px;
  height: 20px;
  background-color: #999;
  -webkit-clip-path: polygon(0 50%, 100% 0 , 100% 100%)
}

<div></div>

创建一个向下箭头指针

3 个答案: