对话框图形的css实现方式

效果图：

用css实现，不会出现图片拉伸问题，同时节省资源。

原理：

外层为一个大的div，突出的小尖角为一个小div，将小div设置旋转并调整好位置，同时将小div背景色设置为同大div一个颜色。

代码：

html：

<div id="big">
  <div id="small"></div>
  hello,world.
</div>

css：

#big{
  width:100px;
  height:100px;
  border:1px solid black;
  margin-top:50px;
  margin-left:50px;
  padding-left:10px;
  background:#fff;
}
#small{
  width:10px;
  height:10px;
  border-top:1px solid black;
  border-left:1px solid black;
  transform:rotate(45deg);
  margin-top:-6px;
  background:inherit;
  margin-left:5px;
}