Question

I am trying to add a triangle to a div to create some sort of speech bubble. That bubble is supposed to have a shadow. I found that you can use unicode and mix it into a pseudo element to create a triangle. Now I am a bit puzzled how I could scale the Unicode Character as it looks a bit odd.

...:after {
content: "◀";
transform: scaleY(2.5); //doesnt seem to work :-(
top: 50px;
left: -11px;
position: absolute;
text-shadow: -1px 0 2px #ccc;
pointer-events: none; }

Thanks for the help on this.

Answer 1

ORIGINAL ANSWER: You can use font-size for pseudo elements to make the text larger. Just add font-size:2.5em;.

NEW IDEA: I know the question was about transforming the content arrow, but for an alternate solution for your speech bubble. What about using the css border arrow “hack” (See my codepen link below w/ extended example):

.bubble:after {
  content:"";
  height:0px;
  width:0px;
  border-color: transparent transparent transparent #cccccc;
  border-style: solid;
  border-width: 10px;
  position:absolute;
  top:20px;
  right:-20px;
  /* Now transform will work since this is not a character: */
  -webkit-transform: scaleY(1.5);
  transform: scaleY(1.5);
}

Codepen example