CSSのツールチップバルーンを書きます

免責事項：この記事はブロガーオリジナル記事ですが、許可ブロガーなく再生してはなりません。
：として結果を達成するため
のHTMLは次のとおりです。

<div class="bottom">
        <p>最近很忙</p>
    </div>

CSSは次のとおりです。

.bottom {
       min-height: 40px;
       position: relative;
       display: table;
       text-align: center;
       border-radius: 7px;
       background-color: #9EEA6A;
       text-align: center;
       display: table;
       margin: 0;
       position: relative;
       border: 1px solid #ccc;
   }
   .bottom::before,
   .bottom::after {
       position: absolute;
       content: "";
       display: inline-block;
       width: 0;
       height: 0;
       border: 8px solid transparent;
       /* top: 11px; */
   }
   .bottom::before {
       bottom: -16px;
       border-top: 8px solid #9EEA6A;
   }
   .bottom::after {
       bottom: -17px;
       border-top: 8px solid #ccc;
       z-index: -1;
   }