css伪元素写三角形

^{先说伪元素和伪类的区别：}

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

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

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

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

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

父元素

#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;