如何利用CSS伪类选择器实现三角形(原创)

三角形的实现有很多种方法。个人认为比较简单且比较常用的是利用伪类选择器,在网页上也有很多用到这种效果,比如tips信息提示框。下面是自己写的实心三角形,原理其实很简单,代码都能看懂。



   
       
       
       
   
   
       
如何利用CSS伪类选择器实现三角形(原创)_第1张图片
效果图.png

看了上面的例子,相信大家已经对这个原理已经了解了,那么下面的效果该如何实现呢,大家可以尝试着去写一下,原理同上。


如何利用CSS伪类选择器实现三角形(原创)_第2张图片
效果图.png

那么实心三角形实现了,空心三角形该怎样实现呢?看看以下代码,你会发现其实代码跟实心三角形的代码都是差不多。



    
        
        
        
    
    
        
如何利用CSS伪类选择器实现三角形(原创)_第3张图片
效果图.png

通过以上的对比。相信大家也能看出其中的原理。总结出了一个道理:三角形往哪个方向,那个方向无需设置border,而相反方向设置border颜色,相邻两边的border设为透明。这样就可实现各个方向的三角形。实心三角形利用CSS中的伪元素(:before)实现,再利用border的transparent属性即可达到效果。而空心三角形是在空心三角形的基础上再加上伪元素(:after)实现。伪元素(:before)实现的是一个实心的三角形,伪元素(:after)实现的是空心的三角形,进而把实心的三角形覆盖,利用绝对定位的top与left的差值绝对了三角形线的粗细而达到如图的效果。


看了上面的代码是不是觉得很简单,但是自己动手能做出来那说明自己已经掌握了,有兴趣的同学可以试试,印象会更加深刻哦~

你可能感兴趣的:(如何利用CSS伪类选择器实现三角形(原创))