CSS代码实现提示气泡效果

项目中用到提示文字的气泡效果

效果如下：

1. 直接使用美工设计好的背景图（此处不讲）；

2.用CSS实现：

    思路：

    整体旅框通过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;
  }