css3伪类做三角型,css伪元素写三角形

先说伪元素和伪类的区别：

伪类是针对CSS，而伪元素是针对HTML，伪类选择器是CSS选择器的一种，而伪类是“假”的HTML标签

伪类(选择器)本质上是为了弥补常规CSS选择器的不足，以便获取到更多信息；

伪元素本质上是创建了一个有内容的虚拟容器；

在CSS3中，伪类和伪元素的语法得到了进一步的调整(一个冒号和两个冒号)；

在开发当中，可以同时使用多个伪类，而只能同时使用一个伪元素；

父元素

#demo{

margin: 100px;

width: 100px;

height: 100px;

border: 1px solid black;

position: relative;

}

伪元素

#demo:before{

content:"";

width:0;

height:0;

position: absolute;

top: 34px;

left: 100px;

border-top:solid 15px transparent;

border-left:solid 15px black ;

border-bottom:solid 15px transparent;

}

当修改成

border-right:solid 15px transparent;

border-left:solid 15px transparent;

border-bottom:solid 15px black;

下三角出现在上边线

当修改成

border-top:solid 15px black;

border-right:solid 15px transparent;

border-left:solid 15px transparent;

小三角在下边线

当修改成

border-top:solid 15px transparent;

border-right:solid 15px black;

border-bottom:solid 15px transparent;

小三角在左边线

这个也可以做成直角三角形，改成

border-right:solid 15px transparent;

border-bottom:solid 15px black;