Question

我试图在div中添加一个三角形来创建某种语音泡泡。这个泡沫应该有一个阴影。我发现你可以使用unicode并将它混合成一个伪元素来创建一个三角形。现在我有点疑惑如何扩展Unicode字符，因为它看起来有点奇怪。

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

感谢您的帮助。

Answer 1

而不是使用：

transform: scaleY(...)

您是否尝试过使用：

zoom:2.5;

Here is the fiddle

Answer 2

原始答案：您可以将font-size用于伪元素以使文字变大。只需添加font-size:2.5em;。

新想法：我知道问题是关于转换内容箭头，但是对于您的语音泡泡的替代解决方案。那么使用css边框箭头“hack”（请参阅下面的扩展示例下面的codepen链接）：

.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

转换css伪元素中的内容

2 个答案: