先看看展示效果:
实现思路
可以把尾部的角标划分成这样子,可以把尾部看成是一个长方形,利用border来实现。是不是突然豁然开朗了~~
代码实现
<!-- html -->
<div class="unbind-box">
<img src="/asset/icon-unbind.png"
class="unbind-img"
alt="">
<span>会员已解绑</span>
</div>
// css
.unbind-box {
padding-left: 7px;
display: flex;
align-items: center;
color: #fff;
font-size: 14px;
height: 27px;
font-weight: 500;
background: #f56c6c;
.unbind-img {
margin-right: 7px;
width: 15px;
}
&::after {
display: block;
content: '';
border: 13px solid transparent;
border-top-color: #f56c6c;
border-bottom-color: #f56c6c;
border-right-color: #fafafa;
border-left-width: 12px;
border-right-width: 8px;
}
}