CSS是一门用于网页样式设计的语言,它可以让我们控制网页的布局、字体、颜色等多个方面,使得网页更加美观和易读。当然,CSS还可以用来实现一些比较炫酷的效果,比如一边柱状一边弧状的标签。.tag { w
CSS是一门用于网页样式设计的语言,它可以让我们控制网页的布局、字体、颜色等多个方面,使得网页更加美观和易读。当然,CSS还可以用来实现一些比较炫酷的效果,比如一边柱状一边弧状的标签。
.tag { width: 200px; height: 40px; border-radius: 20px; background: linear-gradient(to right, #56c1cf, #4585d1); position: relative; } .tag::before { content: '; position: absolute; top: -20px; left: 0; width: 40px; height: 40px; background: #fff; border-radius: 50%; transform: translateX(-50%); } .tag::after { content: '; position: absolute; top: 0; right: 0; width: 20px; height: 40px; border-top-right-radius: 20px; border-bottom-right-radius: 20px; background: linear-gradient(to bottom, #56c1cf, #4585d1); }
上述代码中,我们通过设置伪元素::before和::after来分别实现了标签的弧状和柱状。其中,::before表示弧状部分,通过设置一个圆形的白色背景和位于标签顶部的位置,即可实现一个圆形的标签头。::after则表示柱状部分,通过设置斜角的颜色渐变、右侧的宽度和圆角的属性值,即可实现一个柱状的标签身。
最终的效果如下图所示:
![CSS标签效果图](https://i.loli.net/2021/05/20/v26xda4lJ29Vif3.gif)粉丝
0
关注
0
收藏
0