html三角形选择,如何利用CSS伪类选择器实现三角形（原创）

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

.tri_top, .tri_right, .tri_bottom, .tri_left{

width: 150px;

height: 100px;

background: #CCCCCC;

border-radius: 8px;

margin: 50px 50px;

position: relative;

float: left;

}

.tri_top:before{

content: "";

width: 0px;

height: 0px;

border-left: 10px solid transparent;

border-right: 10px solid transparent;

border-bottom: 10px solid #CCCCCC;

position: absolute;

top: -10px;

left: 65px;

}

.tri_right:before{

content: "";

width: 0px;

height: 0px;

border-top: 10px solid transparent;

border-bottom: 10px solid transparent;

border-left: 10px solid #CCCCCC;

position: absolute;

top: 40px;

left: 150px;

}

.tri_bottom:before{

content: "";

width: 0px;

height: 0px;

border-top: 10px solid #CCCCCC;

border-left: 10px solid transparent;

border-right: 10px solid transparent;

position: absolute;

top: 100px;

left: 70px;

}

.tri_left:before{

content: "";

width: 0px;

height: 0px;

border-top: 10px solid transparent;

border-bottom: 10px solid transparent;

border-right: 10px solid #CCCCCC;

position: absolute;

top: 40px;

left: -10px;

}

效果图.png

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

效果图.png

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

.tri_top, .tri_right, .tri_bottom, .tri_left{

width: 150px;

height: 100px;

border: 1px solid #000000;

border-radius: 8px;

margin: 50px 50px;

position: relative;

float: left;

}

.tri_top:before{

content: "";

width: 0px;

height: 0px;

border-left: 15px solid transparent;

border-right: 15px solid transparent;

border-bottom: 15px solid #000000;

position: absolute;

top: -15px;

left: 65px;

}

.tri_top:after{

content: "";

width: 0px;

height: 0px;

border-left: 14px solid transparent;

border-right: 14px solid transparent;

border-bottom: 14px solid #FFFFFF;

position: absolute;

top: -14px;

left: 66px;

}

.tri_right:before{

content: "";

width: 0px;

height: 0px;

border-top: 15px solid transparent;

border-bottom: 15px solid transparent;

border-left: 15px solid #000000;

position: absolute;

top: 39px;

left: 150px;

}

.tri_right:after{

content: "";

width: 0px;

height: 0px;

border-top: 14px solid transparent;

border-bottom: 14px solid transparent;

border-left: 14px solid #FFFFFF;

position: absolute;

top: 40px;

left: 149px;

}

.tri_bottom:before{

content: "";

width: 0px;

height: 0px;

border-top: 15px solid #000000;

border-left: 15px solid transparent;

border-right: 15px solid transparent;

position: absolute;

top: 101px;

left: 69px;

}

.tri_bottom:after{

content: "";

width: 0px;

height: 0px;

border-top: 14px solid #FFFFFF;

border-left: 14px solid transparent;

border-right: 14px solid transparent;

position: absolute;

top: 100px;

left: 70px;

}

.tri_left:before{

content: "";

width: 0px;

height: 0px;

border-top: 15px solid transparent;

border-bottom: 15px solid transparent;

border-right: 15px solid #000000;

position: absolute;

top: 40px;

left: -15px;

}

.tri_left:after{

content: "";

width: 0px;

height: 0px;

border-top: 14px solid transparent;

border-bottom: 14px solid transparent;

border-right: 14px solid #FFFFFF;

position: absolute;

top: 41px;

left: -14px;

}

效果图.png

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

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