利用css实现三角形

1. 实心三角形

• 1.给一个div，宽和高都为0的时候，盒子什么都没有看起来。为空白
• 2.原理就是让div的宽高等于0，设置他的边框就可以，需要哪里将其余部位颜色隐藏起来即可

<style>
   .jiao {
       position: relative;
       height: 0px;
       width: 0px;
       border-top: 100px solid red;
       border-right: 100px solid black;
       border-bottom: 100px solid blue;
       border-left: 100px solid pink;
   }     //有需要时颜色改为transparent（透明）即可
</style>

2. 空心三角形

• 方法1：
  • 空心三角形同理，在当前的三角形后面添加一个实心三角形，然后把这个三角形定位到当前三角形的位置切割，剩下1px的边，达到空心三角形的效果

.jiao {
       position: relative;
       height: 0px;
       width: 0px;
       border-top: 90px solid transparent;
       border-right: 100px solid black;
       border-bottom: 100px solid transparent;
     }

.jiao:after {
       content: '';
       position: absolute;
       top: -89px;
       left: 2px;
       border-top: 89px solid transparent;
       border-right: 99px solid #ffffff;
       border-bottom: 99px solid transparent;
   }

• 方法二
  • 继承第一种方式，隐藏不需要的边，两边设置1px即可

.jiao {
      position: relative;
      height: 0px;
      width: 0px;
      border-top: 1px solid black;
      border-right: 1px solid black;
      border-bottom: 100px solid transparent;
      border-left: 100px solid transparent;
}   //完成后可使用transform 旋转一下即可