四种三角的实现方式

（以下是在培训当中的一个小作业，方法多多，这是我自己写的其中之一方法）

1.正三角加边框

<div class="tiangle1"></div>

.tiangle1{
   width:0;
   height:0;
   border-width:0 50px 50px;
   border-color: transparent transparent red;
   border-style: solid;
}

2.带有边框的三角实现方式

 <div class="tiangle2"></div>
 .tiangle2{
    width:0;
    height:0;
    border-width:0 50px 50px;
    border-color: transparent transparent black;
    border-style: solid;
    margin-top:40px;
    position: relative
 }
.tiangle2::after{
   position: absolute;
   content: "";
   top:3px;
   left:-45px;
   width:0;
   height:0;
   border-width:0 45px 45px;
   border-color: transparent transparent yellow;
   border-style: solid;
 }
 

3.下角标实现方式

<div class="tiangle3"></div>
 
  .tiangle3{
    width:60px;
    height:60px;
    border-right:1px solid #000;
    border-bottom:1px solid #000;
    transform: rotate(-133deg);
    margin: 40px;
 }

4.直角三角的实现方式

 <div class="tiangle4"></div>

 .tiangle4{
    width:0;
    height:0;
    border-width:0 50px 50px;
    border-color: transparent transparent pink;
    border-style: solid;
    transform: rotate(-133deg)
 }