用于曲线泡泡聊天的CSS样式

Question

我需要绘制一个带圆角的三角形（用于泡泡聊天），如下所示，我找到了一些使用变换的解决方案：旋转，倾斜和缩放

我的问题是：

1. 是否可以在没有复杂的css 3规则的情况下创建此形状
2. 表现明智，做变换：旋转，倾斜和缩放物质还是可以忽略不计？ （假设在移动页面上一次有6次这种形状）

Answer 1

您可以使用border-radius制作包含圆角的聊天框，然后添加：before元素，顶部有三角形的css背景图片。所有标准，简单的CSS。

Answer 2

使用以下代码检查可能会对您有所帮助。

#chat{
  background-color : #4692F0;
  height : 50px;
  width : 300px;
  border-radius : 5px;
}
#chat:before{
      position: absolute;
content: "\f0d8";
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
top: -8px;
transform: rotate(76deg);
color: #4692F0;
font-size: 35px;
left: 25px;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css" rel="stylesheet"/>
<div id="chat">
  
</div>