伪类画冒泡对话框

第一种方法：

是直接用在已有矩形的基础上，用伪类画三角形

 

    .shape1{
        display: inline-block;
        width:300px;
        height:120px;
        background: #5cb6f5;
        position:relative;
        color:#fff;
        font-size: 18px;
        line-height: 120px;
        text-align: center;
    }
    .shape1:after{
        content:"";
        border-left:20px solid #5cb6f5;
        border-top:10px solid transparent;
        border-bottom:10px solid transparent;
        position: absolute;
        right:-20px;
        top:50px;
    }

第二种方法

先画一个大矩形，然后用一个小矩形通过旋转组合而成

.shape2{
        border-radius:4px;
        display: inline-block;
        width:300px;
        height:120px;
        background: #5cb6f5;
        position:relative;
        color:#fff;
        top:150px;
        left:0;
        font-size: 18px;
        line-height: 120px;
        text-align: center;
    }
    .shape2:after{
        content:"";
        width:20px;
        height:20px;
        border-radius: 4px;
        background: #5cb6f5;
        transform:rotate(45deg);
        position: absolute;
        top:48px;
        z-index: 555;
        left:287px;
    }

 

第三种方法

先画大矩形，通过伪类before和after先添加小三角形，然后切出一个描边

.shape3{
        margin-top: 20px;
        display: inline-block;
        width:300px;
        height:120px;
        background: #fff;
        border:1px solid #5cb6f5;
        border-radius: 4px;
        position:relative;
        color:#5cb6f5;
        font-size: 18px;
        line-height: 120px;
        text-align: center;
    }
    .shape3:before{
        position:absolute;
        content:"";
        border-left:20px solid #fff;
        border-top:10px solid transparent;
        border-bottom:10px solid transparent;
        top:50px;
        right:-20px;
        z-index: 666;
    }
    .shape3:after{
        position:absolute;
        content:"";
        border-left:22px solid #5cb6f5;
        border-bottom:11px solid transparent;
        border-top:11px solid transparent;
        top:49px;
        right:-22px;
        z-index: 333;
    }

转载于:https://www.cnblogs.com/xunmucao/p/10019916.html