前端氣泡效果實現的方式

氣泡效果在前端設計中很常見，如上圖就是一種對話氣泡效果的實際應用。氣泡效果在CSS前端編程中實現的難點是不規則的三角形，比較主流的設計思路是通過絕對定位的偽元素來制作該三角形效果。

        .container {
            width: 300px;
            height: 200px;
            background-color: #a8d5f3;
            position:relative;
            border-radius:.6em ;
        }

        .container::after{
            color:#a8d5f3;
            content:'';
            position:absolute;
            background-color:currentColor;
            background:linear-gradient(135deg,transparent 50%, currentColor 50%);   
            width:50px;
            height:50px;
            z-index:-1;
            transform:rotateZ(60deg);
            right:-15px;
        }

　　

前端純CSS繪制三角形可以參考《純CSS繪制三角形》。