廢話少說直接上效果圖：

主要是通過設定邊框的樣式去畫的

1.第一步

建一個容器便於每個風葉定位

 <!-- 容器 方便定位每一個風葉 -->
    <div class="box">
        <div class="red"></div>
    </div>

然後就是對應的CSS程式碼

 .box{
          width: 400px;
            height: 200px;
            margin: 200px auto;
            position: relative;
            border: 1px solid #ddd;
        }
        .red {
            width: 0;
            height: 0;
            border: 100px solid red;       
        }
 

然後你會得到一個這樣的效果圖

這樣看也能看不出什麼效果 ，我們對程式碼進行一點小小的改動

  .red {
            width: 0;
            height: 0;
            border: 100px solid red;
            //對每個邊框的顏色進行獨立的設定
            border-left-color: green;
            border-top-color: pink;
            border-right-color:black ;
        }

然後繼續寫CSS程式碼

  .red {
            width: 0;
            height: 0;
            border: 100px solid red;
            border-top: 0;
            border-left-color: transparent;
            position: absolute;
        }
 

這個時候你就會發現由原來的正方形變成這個樣子了（這樣大風車的一個風葉就畫好了，同理畫出下面四個）

繼續新增剩下三個div

 <!-- 容器 方便定位每一個風葉 -->
    <div class="box">
        <div class="red"></div>
        <div class="green"></div>
        <div class="blue"></div>
        <div class="pink"></div>
    </div>
 

CSS程式碼

 .box {
            width: 400px;
            height: 200px;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            border: 1px solid #ddd;
        }

        .red {
            width: 0;
            height: 0;
            border: 100px solid red;
            border-top: 0;
            border-left-color: transparent;
        }

        .green {
            width: 0;
            height: 0;
            border: 100px solid green;
            border-right: 0;
            border-top-color: transparent;
        }

        .blue {
            width: 0;
            height: 0;
            border: 100px solid blue;
            border-left: 0;
            border-bottom-color: transparent;
        }

        .pink {
            width: 0;
            height: 0;
            border: 100px solid pink;
            border-bottom: 0;
            border-right-color: transparent;
        }

就差最後一步了，把每個風葉定位到合適的位置(通過絕對定位 position : absolute)

完整程式碼

 .box {
            width: 400px;
            height: 200px;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            border: 1px solid #ddd;
        }

        .red {
            width: 0;
            height: 0;
            border: 100px solid red;
            border-top: 0;
            border-left-color: transparent;
        }

        .green {
            width: 0;
            height: 0;
            border: 100px solid green;
            border-right: 0;
            border-top-color: transparent;
            position: absolute;
            left: 200px;
            top: -100px;
        }

        .blue {
            width: 0;
            height: 0;
            border: 100px solid blue;
            border-left: 0;
            border-bottom-color: transparent;
            position: absolute;
            left: 100px;
            top: 100px;
        }

        .pink {
            width: 0;
            height: 0;
            border: 100px solid pink;
            border-bottom: 0;
            border-right-color: transparent;
            position: absolute;
            left: 200px;
            top: 100px;
        }

最後風車就畫好了

既然是風車怎麼能不會旋轉呢，可以新增動畫來設定旋轉

定義一個旋轉動畫

@keyframes rotateBox {
            form{
                transform: rotate(0);
            }
            to{
                transform: rotate(360deg);
            }
        }

在類名為box的div上引用

 .box {            
         width: 400px;        
          height: 200px;        
          margin: 200px auto;    
          position: relative;        
          border: 1px solid #ddd;         
         animation: rotateBox 1s infinite  linear; // 動畫名  執行一次需要的時間   一直執行  規定動畫的速度曲線        }

最後效果圖：