html:
<div className={styles.rechargeAmount}>
<span className={styles.popover}>
<span />
8折优惠
</span>
充值金额:
</div>
css:
.rechargeAmount {
position: relative;
.popover {
position: absolute;
top: -25px;
width: 60px;
height: 22px;
color: #ffae00;
font-weight: bold;
font-size: 12px;
line-height: 22px;
letter-spacing: 1px;
text-align: center;
background: #fff0cf;
border-radius: 4px;
span {
position: absolute;
bottom: -10px;
left: 25px;
display: block;
font-size: 0;
line-height: 0;
border-color: #fff0cf transparent transparent;
border-style: solid dashed dashed;
border-width: 5px;
}
}
}
效果: