Create a down arrow pointer

Question

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

Possible duplicate of http://stackoverflow.com/questions/30299093/speech-bubble-with-arrow — Harry, May 27 '16 at 14:34
@C14L Thanks. BUt it doesn't move along with the rectangle shape? so it looks like the speech bubble. — Becky, May 27 '16 at 14:38
if .tri is opacity:0; , no matter the value of opacity will be on pseudo .tri and its content including pseudo will remain unseen :( — G-Cyrillus, May 27 '16 at 15:27
@GCyrillus Thanks. But the opacity is set to 1 in the hover state — Becky, May 27 '16 at 15:37
i see it here applied only to pseudos : `.parent:hover .tri:before, .parent:hover .tri:after ` not .tri wich remains opacity:0; .Did I miss something here ? — G-Cyrillus, May 27 '16 at 15:49

G-Cyrillus · Accepted Answer · 2016-05-27T16:17:10.470

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/

score 0 · Answer 2 · answered May 27 '16 at 14:44

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.

score 0 · Answer 3 · answered May 27 '16 at 15:41

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>

Create a down arrow pointer

3 Answers3

Linked

Related