如何在css中创建语音气泡？

我想创造一个这样的演讲

我尝试使用CSS创建。但我不能像这样对齐顶部箭头。我的密码是

.bubble
{
位置：相对位置；
宽度：275px；
高度：40px；
填充物：5px；
背景：#C00006；
-webkit边界半径：14px；
-moz边界半径：14px；
边界半径：14px；
}
.泡泡：之后
{
内容：''；
位置：绝对位置；
边框样式：实心；
边框宽度：0 19px 79px；
边框颜色：#C00006透明；
显示：块；
宽度：0；
z指数：1；
左边距：-19px；
顶部：-79px；
左：69%；
}

您可以在

psuedo选择器上使用CSS3方法，如下所示：

.bubble:after {
    -ms-transform: skew(-40deg, 0deg);
    -webkit-transform: skew(-40deg, 0deg);
    transform: skew(-40deg, 0deg);
}

这里有一个


.bubble{
位置：相对位置；
宽度：275px；
高度：40px；
填充物：5px；
背景：#C00006；
-webkit边界半径：14px；
-moz边界半径：14px；
边界半径：14px；
}
.泡泡：之后{
内容：''；
位置：绝对位置；
边框样式：实心；
边框宽度：0 27px 79px；
边框颜色：#C00006透明；
显示：块；
宽度：0；
z指数：1；
左边距：-19px；
顶部：-79px；
左：69%；
-ms变换：倾斜（-40度，0度）；
-webkit变换：倾斜（-40度，0度）；
变换：倾斜（-40度，0度）；
}








您可以通过使用并指定以下选项来实现：


.bubble{
位置：相对位置；
顶部：4.8em；
宽度：275px；
高度：40px；
填充物：5px；
背景：#C00006；
-webkit边界半径：14px；
-moz边界半径：14px；
边界半径：14px；
}
.泡泡：之后{
内容：''；
位置：绝对位置；
边框样式：实心；
边框宽度：0 19px 79px；
边框颜色：#C00006透明；
显示：块；
宽度：0；
z指数：1；
/*顶部：-79px*/
底部：100%；/*优于指定顶部*/
右：例如，38px；/*等于箭头的宽度*/
-webkit变换：skewX（-45度）；
-moz变换：skewX（-45度）；
-ms变换：skewX（-45度）；
-o变换：斜交（-45度）；
变换：skewX（-45度）；
-webkit转换源：38px 100%；
-moz变换原点：38px 100%；
-ms转换原点：38px 100%；
-o-变换原点：38px 100%；
转换原点：38px 100%；
}
试试这个

变换：旋转（50度）

编辑
usw
skew
而不是
rotate
。查看带有最小CSS的代码段

变换：倾斜（-45度）
.bubble{
位置：相对位置；
底部：-70px；
宽度：275px；
高度：40px；
填充物：5px；
背景：#C00006；
边界半径：14px；
}
.泡泡：之后{
内容：''；
位置：绝对位置；
边框样式：实心；
边框宽度：0 19px 79px；
边框颜色：#C00006透明；
宽度：1px；
z指数：1；
底部：95%；
左：79%；
变换：倾斜（-45度）；
}
对其应用3D变换；透视图。看这个，可能是有用的，这将从baseline@diEcho我没有完全细化其他声明，只是为了完整性，不再需要使用供应商前缀
border radius
，而且伪元素上的
display:block
是多余的。
.bubble:after
{
    content: '';
    position: absolute;
    border-style: solid;
    border-width: 0 19px 120px;
    border-color: #C00006 transparent;
    display: block;
    width: 0;
    z-index: 1;
    margin-left: -49px;
    top: -79px;
    left: 95%;
    -ms-transform: (50deg);
    -webkit-transform: rotate(50deg);
    transform: rotate(50deg);
}