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