用CSS画实心三角形和空心三角形

（1）实心三角形

html

<div class='sanjiao'></div>

css

.sanjiao{
   border-left: 10px solid transparent;
   border-bottom: 10px solid red;//向上的三角
   border-right: 10px solid transparent;
   border-top: 10px solid transparent;
   width: 0px;
   height: 0px;
}

（2）空心三角形

这里画了一个正方形，不设置背景色，设置左边和上边相邻两边的border，再画两个三角形，边长为第一个三角形的对角线长度，通过旋转驾到第一个三角形的斜边上，通过两个矩形组合成一个空心的三角形

.sanjiao{
  width: 100px;
  height: 100px;
  border-left: 1px solid red;
  border-top: 1px solid red;
  position: relative;
}

.sanjiao:after{
    content: "";
    position: absolute;
    left: 29px;
    top: 29px;
    width: 141.4px;
    height: 141.4px;
    border-left: 1px solid red;
    transform: rotate(45deg);//通过旋转来改变三角形的朝向
}