css3实现三角形、五角星、五星红旗

• 三角形

• 原理

1、最初，咱们先创建一个div宽高为100px，边框分别为50px，实现效果如下：

           

2、将div的宽高分别调至0px，实现效果如下：

宽度为0，则右边边框向左靠近：  高度为0，则上面边框向下靠近：  

当宽高都为0时，则实现效果:       

• 实现

1、向下三角形：（将上/右/左边边框全部展示为transparent）

               // 上下展示只是关乎上边框是否改为透明色而已；

2、向下、向右、向左三角形   同理（此处不一一修改展示）

3、直角三角形（不设置左边的边框，则上下边框会被截成两半，则会出现直角）

                   

 

• 五角星

• 原理（由三个三角形旋转组成）                                               

1、首先实现一个角度较大的三角形，效果如下：

              

2、使用伪元素::before 和::after，复制两个三角形

 

• 五星红旗