Create a down arrow pointer

问题:

How can I create a down arrow for parent in css so it would look like a speech bubble?

This is what I tried.

<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

回答1:

You are missing 2 things here :

• content:''; for the pseudos

• show the parent pseudo

  :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/

you could also spare some code using an unicode character like \25bc:

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

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

unicode ressource among others : http://unicode-table.com/en/sets/arrows-symbols/

回答2:

Like this?

.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);
}

Make an angle with two borders and then rotate it 45 degrees or where ever you need it to point to. Important: a :after or :before pseudo element always needs a content: '' property, even it just an empty string. Otherwise the pseudo element will not show.

More elaborate examples of entire speech bubbles are easily found, this fiddle, for example.

回答3:

You can use clip-path as an alternate for the border shape ,

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>