利用纯CSS3实现标签效果

在做网页的时候经常要实现一些类似于标签的标识,这时很多人会使用图片去实现,当然这是一种做法,还有另外一种做法就是利用CSS3的属性来实现该效果!下面看看效果图:

利用纯CSS3实现标签效果

要实现该效果原理就是右边定位一个三角形,然后下面的夹角也是定位一个小三角形就可以实现如图所描述的效果!

下面来看看简要的代码:

html:

利用纯CSS3实现标签效果

主要CSS:

利用纯CSS3实现标签效果

主要通过css伪类来添加2个三角形的效果,实现标签效果!

  • 我的微信
  • 这是我的微信扫一扫
  • weinxin
  • 我的微信公众号
  • 我的微信公众号扫一扫
  • weinxin
avatar

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: