如何用 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變換屬性來實現）