CSS代码实现提示气泡效果

气泡三角主要使用，border-color ，把元素的前后伪元素，叠加生成气泡上方的小箭头；

border-color：如果元素都是边框，则是三角形如下图

 伪元素其他3边透明，留一个边（即三角形，两个伪元素位置差1-2像素形成三角形的两个边）

例子：

思路：

    整体绿框通过border 设置；

    三角部分先通过 before伪元素设置一个全绿三角，再通过after设置一个全白三角遮住部分，形成所需效果。

html：

<div class="div"></div>

css：

    .div{
        width: 200px;
        height: 100px;
        border: 2px solid #95eb6c;
        position: relative;
        top: 50px;
    }
    .div::before{
    content: '';
    width: 0;
    height: 0;
    border: 20px solid;
    position: absolute;
    top: -40px;
    left: 140px;
    border-color: transparent transparent #95eb6c;
    }
    .div::after{
    content: '';
    width: 0;
    height: 0;
    border: 20px solid;
    position: absolute;
    top: -36px;
    left: 140px;
    border-color: transparent transparent  #fff;
    }
    .div{
    width: 200px;
    height: 100px;
    border: 2px  solid #95eb6c;
    border-radius: 7px;  /*圆角弧度为7px*/
    position: relative;
  }

转： https://blog.csdn.net/RedaTao/article/details/103903014

https://wenku.baidu.com/view/c7597108b7daa58da0116c175f0e7cd1842518f0.html

https://baike.baidu.com/item/CSS%20border-color/2152244?fr=aladdin