css实现气泡对话框

实现气泡聊天框

---

• 我介绍两个方法：

• 第一种：利用旋转，首先设置一个小正方形利用transform属性将其旋转45度，当我们把一个长方形方框和旋转后的小正方形置于一起就可以都得到理想效果

• 效果图如下:
  

• 如上图所示，露出来的三角只是小正方形的一角

• 代码实现如下：

#father{
            width: 50px;
            height: 20px;
            text-align: center;
            line-height: 20px;
            background-color: tomato;
            position: relative;
        }
        #father::after{
            content: "";
            position: absolute;
            width: 7px;
            height: 7px;
            background-color: tomato;
            transform: rotate(45deg);
            right: -3px ;
            top: 30%;
        }

• 首先对与父级选择器进行相对定位，再对after伪类绝对定位，通过查看网页效果设定right、top值逐步调整实现效果

• 下面是第二种方法：

• 根据需要的对话框效果图来设置小三角的效果指向（第一种就是指向右边所以设定after显示），我们可以对于显示的内容进行边框设定，设定边框的宽度高度等，设定完成后，只保留我们需要的上下左右任意一个边框的颜色

• 然后对齐进行定位显示，剩余三个边框均设置为透明无颜色

• css代码实现如下：

/* okay：利用边框透明实现 */
        #okay{
            position: relative;
            /* 相对定位 */
            background-color: red;
            text-align: center;
            line-height: 25px;
            display: inline-block;
            color: aliceblue;
            font-size: 15px;
        }
        #okay::after{
            content: "";
            position: absolute;
            /* 绝对定位 */
            border: 5px solid transparent;
            /* transparent：此处定义边框线透明
                background：transparent则为背景透明
            solid：定义边框线为实线
               thin：细线  mediu：中粗线  thick：粗线 */
            border-left-color:red ;
            top: 30%;
        }

• 两种方法的最终显示结果相同