在CSS僞元素中轉換內容

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

原來的答案：您可以使用font-size僞元素，使文本大。只需添加font-size:2.5em;。

新想法：我知道這個問題是關於改變內容箭頭，但爲您的演講泡沫的替代解決方案。有關使用CSS的邊框箭頭「黑客」（見下文W /擴展的例子，我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

Answer 2

而不是使用：

transform: scaleY(...) 

您是否嘗試過使用：

zoom:2.5; 

Here is the fiddle