CSS写三角形和一个小风车案例

CSS实现三角形与小风车案例

三角形原理 盒子设置宽高为0 边框设置为10px solid 颜色为透明transparent 想要在哪个方向的三角形就根据边框的显示的方向 border-right 右三角形

    举例

    .box {

        width: 0;

        height: 0;

        background-color: pink;

        border: 20px solid transparent;

        border-top: 20px solid yellow;

border-right: 20px solid red;

        border-bottom: 20px solid green;

        border-left: 20px solid blue;

     }

  然后再想要一个三角形就把所有边框颜色变成透明色和留一个左边框颜色border-left，把其他border方向去掉，就出来一个蓝色的三角形

        border: 20px solid transparent;

        border-left: 20px solid blue;

现在拓展一下做一个小风车案例代码如下

 1. 先设置一个大盒子

       .box {

            width:  160px;

            height: 160px;

            /* background-color: blue; */

         }

         

 2.每个span由四个三角组成一个正方形，然后全部设置上下左右边框为透明，再设置下边框大小为40px和颜色为绿色,第一个span盒子的三角形形状就出来了

                                    

.box span {

      float: left;

            width: 0;

            height: 0;

            border: 40px solid transparent;

            /* background-color: red; */

         }

         .box .a1 {

            /* border-color: green; */

            border-bottom: 40px solid green ;

         }

 3.第二个盒子span以此类推，设置左边框大小为40px颜色为黄色三角形就出来了

         .box .a2 {

            /* border-color: yellow; */

            border-left: 40px solid yellow;

         }

4.第三个盒子span，设置右边框大小为40px颜色为橙色三角形就出来了

         .box .a3 {

            /* border-color: orange; */

            border-right: 40px solid orange;

         }

5.第四个盒子span，设置右边框大小为40px颜色为橙色三角形就出来了

         .box .a4 {

            /* border-color: blueviolet; */

            border-top: 40px solid blueviolet;

         }

     <div class="box">

        <span class="a1"></span>

        <span class="a2" ></span>

        <span class="a3"></span>

        <span class="a4"></span>

    </div>

6.最后完整的小风车就完成了如下图