实现效果
<div class="item-t">95%</div>
css样式
<style scoped>
.item-t{
width: 48px;
height: 30px;
border:3px solid #3078ea;
border-radius: 4px;
position: relative;
background: #0245ae;
font-size: 16px;
display: flex;
justify-content: center;
align-items: center;
font-family: Arial;
font-weight: 400;
color: #16FBF9;
line-height: 24px;
}
.item-t::before{
content: '';
width: 0;
height: 0;
border: 8px solid;
position: absolute;
bottom: -18px;
left: 50%;
transform: translateX(-50%);
border-color: #3078ea transparent transparent;
}
.item-t::after{
content: '';
width: 0;
height: 0;
border: 8px solid;
position: absolute;
bottom: -15px;
left: 50%;
transform: translateX(-50%);
border-color: #0245ae transparent transparent;
}
</style>