css 绘制带尖角的矩形

不能使用组件解决，需要写出一个类似气泡的矩形。
如图：

矩形带尖角的

实现图示的效果涉及到的知识主要有两点：一个是before、after伪元素，一个是border

1、before 和 after 都是css中的伪元素，他们俩用法都差不多，通过给定一个属性content给元素添加新的内容，不同的是before用来在元素前插入新内容，after用来在元素后面插入新内容。

比如有一个p元素：水

水

如果给这个p元素设置一个before：

p:before{
content:“上海自来”;
}
这个p就变成了：
上海自来水
，content属性的值就添加到了p元素内容的前面。
相反的，如果是用after：

p:after{
content:“来自海上”;
}
这个p就会变成：
水来自海上。

简单的before、after使用就是这样，一开始看的时候觉得好简单，不就是插入个内容吗，但实际上插内容不算什么，最重要的是它能设！置！样！式！一旦给它设置各种各样的样式之后这个伪元素就厉害了，比如图中的尖角，一个div，但是很明显div只能弄出一个左边的带边框正方形，右边的尖角怎么来的呢，那就可以靠这个伪元素了。

思路很简单，先把正方形画出来，然后通过before或者after变出一个尖角出来，放到正方形右上角去。

#demo{
width:100px;
height:100px;
background-color:#fff;
border: 2px #000 solid;
}
好，这个时候正方形已经出来了，但是三角形怎么画出来呢，这就要用到border了

2、以前使用border都是border：1px #000 solid，顶多换换颜色和边框值，没想到画三角形也能靠它……

以前没发现的原因在于使用border的时候总是1px、2px的，太细了，当把边框变成20px的时候就有意思了&