css 制作三角形

.tri_right{
      width: 150px;
      height: 100px;
      border: 1px solid #000000;
      margin: 50px 50px;
      position: relative;
      float: left;
  }
  .tri_right:before{
      content: "";
      width: 0px;
      height: 0px;
      border-top: 50px solid transparent;
      border-bottom: 50px solid transparent;
      border-left: 50px solid #000000;
      position: absolute;
      top: -1px;
      left: 149px;
  }
  .tri_right:after{
      content: "";
      width: 0px;
      height: 0px;
      border-top: 49.5px solid transparent;
      border-bottom: 49.5px solid transparent;
      border-left: 49.5px solid #FFFFFF;
      position: absolute;
      top: 0px;
      left: 148px;
  }

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