版权声明：本文为博主原创文章，未经博主允许不得转载。 实现效果为： 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; }