爱淘FE

Posted by:
Mickey

每件事最后都会是好事,如果不是好事,说明还没到最后

736
background-clip 组合拳的一个小玩法

background-clip 组合拳的一个小玩法

之前项目里有个半透明的Tag组件如下,长度随字数自增,箭头可左可右。

开始用代码实现,分拆为【圆角矩形+圆角三角】2个元素组合实现,但总是无法完美实现,原因至少有:

1. 半透明特性,若有重合区域会透明度叠加重影。
2. 两元素的高度定位总无法匹配一致(viewport缩放导致)。

多次折腾后摸索出一个方法

back up ↑