关于css:四种三角的实现方式

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

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)
 }