欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

还在为小三角形切图?使用纯CSS写一个简单的三角形_html/css_WEB-ITnose

程序员文章站 2023-12-22 14:19:22
...
  同学们,当美工给的设计图是这样:

  或者这样:

  我的内心其实是拒绝的-_-;但工作还得干,大部分同学会写

添加会计

  或者干脆利落

还在为小三角形切图?使用纯CSS写一个简单的三角形_html/css_WEB-ITnose
添加会计

  这样做是可以解决问题的,但是为了这个一个小小的小尖尖,我们还要大费周章的去切(很少同学能享受到美工给制作的sprite图片),如果遇到的设计图不是分层的或者设计软件都不熟的话是很郁闷的...

  其实有一种简单的方法可以搞定这种小尖尖,大家请看:

  

添加会计

  这就涉及到border的问题,如果一个元素的宽度设为0,border-width却为大于0的数,结果是会出现一个正方形(每个边会成为一个等边直角三角形),如果设置border-color为上右下左不同的四种颜色,结果就会出现一个由四个等边三角形构成的正方形!

  这样大家不难想到,如果把某三个边的颜色设为透明,我们就能得到一个任意颜色的三角形了。

  然后我们将这个元素,例如标签,设置定位为相对定位,调整其top和left的值,即可轻易得到一个用css写的小尖尖。

  至于这个有边框的尖尖,我给大家说一下思路:在上面实现的三角中放入一个类似的元素,我们称之为子三角,父三角的border-color设置为下面div的边框颜色,子三角的border-color设置为div的背景颜色,子三角定位(注意调整子三角位置,使其恰好露出父三角1px的边),然后调整父三角的位置,OK大功告成!

  如果知道的兄台就当是看个戏,不是很熟练的同学可以自己多练练。希望多多批评指正!

上一篇:

下一篇: