创建向下箭头指针

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

像这样？

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

您可以使用 clip-path as an alternate for the 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>

Answer 3

您在这里遗漏了两件事：

内容：'';对于伪

显示父伪

:before,

:after {
  content: '';

}

.parent:hover .tri,

.parent:hover .tri:before,

.parent:hover .tri:after {

  opacity: 1;

}

: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;
}

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

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

你也可以使用像 bc:

这样的 unicode 字符来节省一些代码

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

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

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

创建向下箭头指针

Create a down arrow pointer

html

css

css-shapes