贯穿渐变线,中间插值
- 如图:
<h3 class="brief-modal-title">
<span>公告</span>
</h3>
.brief-modal-title
position relative
text-align center
margin 15px auto 15px
width 85px
background-image linear-gradient(90deg, #fff, #333 50%, #fff)
background-size 100% 1px
background-position 50%
background-repeat no-repeat
> span
font-size 12px
padding 0 6px
color #999
background-color #fff
徽章
- 如图:
<span class="content-tag">
<span class="mini-tag">品牌</span>
</span>
.content-tag
display inline-block
border-radius 2px
background-image linear-gradient(90deg, #fff100, #ffe339)
width 36px
height: 18px
margin-right 10px
color #6a3709
font-style normal
position relative
.mini-tag
position absolute
left 0
top 0
right -100%
bottom -100%
font-size 24px
transform scale(.5)
transform-origin 0 0
display flex
align-items center
justify-content center
图标箭头
如图:
// 箭头由伪元素构成
<i class="content-icon"></i>
#################分隔符
<div class="discounts-right">4 个优惠</div>
.content-icon
width 20px
position relative
height 16px
&::after
content ""
border-style solid
border- 6px 0 6px 7px
border-color transparent transparent transparent rgba(0, 0, 0, .67)
position absolute
left 8px
top 3px
#################分隔符
.discounts-right
width 50px
flex-shrink 0
position relative
padding-right 10px
text-align right
&::after
content ""
display block
border-style solid
border-width 4px 4px 0
border-color rgba(0, 0, 0, .57) transparent transparent
position absolute
top 50%
transform translateY(-50%)
right 0
不常见样式收集
will-change transform