常用样式
小于 1 分钟
三角气泡
三角气泡
<div class="tips">你好</div>
.tips {
display: inline-block;
position: relative;
height: 40px;
padding: 0 26px;
background: #ff2a1c;
font-size: 24px;
font-family: Alibaba PuHuiTi;
font-weight: 500;
color: #ffffff;
line-height: 40px;
border-radius: 20px;
text-align: center;
}
.tips::before {
position: absolute;
content: "";
bottom: -8px;
left: 50%;
transform: translateX(-50%);
width: 0;
height: 0;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-top: 8px solid #ff2a1c;
}