寫個消息框容易太容易了，網上一搜就一大堆教程。直接拷貝粘貼到自己項目就可以啦。大多是用::after或者::before實現三角形，絕對定位移動到邊上成為消息框的角角。

但是如果要我們實現背景色是透明的消息框，如下：

似乎常用的消息框寫法這種操作是實現不了的。

難點一

用常用的方式實現的消息框，想要改成透明背景，似乎不太可能。

因為如果消息框有邊框的話，消息框的角通常是用::after 與 ::before 做成三角形，然后一大點的三角形與小一點的三角形重疊而成，如果我們想要把消息框的角變成透明的，總會透到后面作為是模擬邊框的三角形的顏色。

(如上圖我把作為背景三角形設置了 opacity: .5 透的是作為邊框的顏色，兩個顏色混合在了一起)

難點二

還有一個問題就是消息框的角透明會透到消息框的邊框線。

如何實現

好了，接下來說說我是如何實現的。

消息框的角還有另一種實現方法就是就是寫個小正方形旋轉45度。

然后給正方形上邊和右邊邊框