0

我正在尝试向 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; }

感谢您对此的帮助。

4

2 回答 2

0

而不是使用：

transform: scaleY(...)

您是否尝试过使用：

zoom:2.5;

这是小提琴

于 2012-12-14T17:19:29.693 回答
0

原始答案：您可以使用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);
}

代码笔示例

于 2012-12-14T17:47:23.927 回答