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