如何用 html+css 实现平行四边形，以及气泡框呢？

【效果图】

首先说一下平行四边形，想要做成的效果大致是下面这个样子的



【思路】

如果考虑用昨天的方法，利用 border 边界值，就可以分解成 一个右三角+矩形+上三角（这里右，上的意思指的是需要加上颜色显示的边界颜色），但这样就挺复杂了，所以要换一种方法来做

【做法】

其实利用上次说的 css3 的属性 transform 属性来设置

{
display: inline-block;
padding: 5px 20px;
border: 1px solid #44a5fc;
color: #333;
transform: skew(-20deg); /* 定义沿着 X 和 Y 轴的 2D 倾斜转换*/
}

【注意】

但是这么做，有个注意的地方就是，如果当前盒子里包裹其他内容，这个其他内容也会跟着旋转，所以为了避免这种效果，需要在内部重新加一个盒子，并对这个盒子进行一个逆向的 transform，这样就实现了平行四边形了，也就是一个属性的事情

【思考】

要是个梯形，该怎么做呢？

接下来再说一下怎么制作一个类似 tooltip 的气泡提示框呢？

【效果图】

先看一下大致的效果



【思路】

其实做起来也相当的简单，就是用一个盒子加一个三角形就行，然后控制好定位的问题就可以做到

【做法】

在有一个叫做 rectangle 的盒子，然后在这个盒子里面有一个 trangle 的盒子

.rectangle{
position:relative;
width:150px;
height:35px;
background:green;
border-radius:5px;
margin:30px auto 0;
padding: 10px;
color:white;
}
.rectangle .trangle{
position:absolute;
top:12px;
right:-16px;
width:0;
height:0;
font-size:0;
border:solid 8px;
border-color:transparent transparent transparent green;
}

然后差不多就可以实现了

【注意】

有一个注意的地方就是 position 的使用，在外部盒子的是一定要使用相对定位的

【思考】

需要做一个不规则的小三角呢？（其实应该是类似的，就是用不同类型的三角形层层的遮罩，或者利用 css3 的2D变换属性来实现）