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;
  }